在特定位置將元素插入 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)

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>