javascript - 在特定位置将元素插入 DOM 不起作用

Question

我想在和usinginput type=text之间插入一个字段，但它不起作用。插入字符串而不是元素。pinput type=submitinsertAdjacentHTML[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)

Answer 2

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>