CODEWITHSUNDEEP
javascriptecmascript-6insertadjacenthtml
Tzar
Tzar

Reputation: 4789

Inserting element into DOM at a specific place is not working

I would like to insert an input type=text field between p and input type=submit using insertAdjacentHTML, but it’s not working. A string [object HTMLInputElement] gets inserted instead of an input element.

What am I missing? Please share if there is a more elegant way to do this.

Here is my code:

const form = document.forms[0]
const submitButton = form.querySelector("[type='submit']")

const foobar = Object.assign(document.createElement("input"), {
  type: "text",
  name: "Foobar",
  readOnly: "true"
})
  
submitButton.insertAdjacentHTML("beforebegin", foobar)
<form>
  <fieldset>
    …
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <input type=submit value=Submit>
  </fieldset>
</form>

Upvotes: 2

Views: 321

Answers (2)

CertainPerformance
CertainPerformance

Reputation: 371049

insertAdjacentHTML does just what it sounds like - it inserts HTML, like the string '<input value="foo">'. It doesn't insert elements.

If you want to insert an adjacent element, use insertAdjacentElement:

const form = document.forms[0]
const submitButton = form.querySelector("[type='submit']")

const foobar = Object.assign(document.createElement("input"), {
  type: "text",
  name: "Foobar",
  readOnly: "true"
})
  
submitButton.insertAdjacentElement("beforebegin", foobar)
<form>
  <fieldset>
    …
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <input type=submit value=Submit>
  </fieldset>
</form>

Upvotes: 2

Bergi
Bergi

Reputation: 665122

insertAdjacentHtml is used for inserting HTML text, a string. To insert DOM nodes, use insertBefore:

submitButton.parentNode.insertBefore(foobar, submitButton)

Upvotes: 2

Related Questions