javascript - 在特定位置将元素插入 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 文本，一个字符串。要插入 DOM 节点，请使用 insertBefore :

submitButton.parentNode.insertBefore(foobar, submitButton)