在特定位置将元素插入 DOM 无效

Question

我想使用 insertAdjacentHTML 在 p 和 input type=submit 之间插入一个 input type=text 字段，但它不起作用。插入字符串 [object HTMLInputElement] 而不是 input 元素。

我错过了什么？如果有更优雅的方法，请分享。

这是我的代码：

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>

Answer 1

insertAdjacentHTML 就像它听起来的那样 - 它插入 HTML，就像字符串 '<input value="foo">' 一样。它不插入元素。

如果要插入相邻元素，请使用 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>

Answer 2

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

submitButton.parentNode.insertBefore(foobar, submitButton)

在特定位置将元素插入 DOM 无效

Inserting element into DOM at a specific place is not working

javascript

ecmascript-6

insertadjacenthtml