javascript 我可以使用 insertAdjacentHTML 插入 DOM 元素吗
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24470558/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I use insertAdjacentHTML to insert DOM element
提问by Yukulélé
insertAdjacentHTMLexpects 2 arguments:
insertAdjacentHTML期望 2 个参数：
- position (
"beforebegin","afterbegin","beforeend","afterend") - html (will be converted from text to DOM)
- 位置 (
"beforebegin","afterbegin","beforeend","afterend") - html（将从文本转换为 DOM）
Can I pass DOM element as the second argument?
我可以将 DOM 元素作为第二个参数传递吗？
采纳答案by Yukulélé
.insertAdjacentHTML()only accept string that will be parsed as HTML and inserted (like innerHTML)
.insertAdjacentHTML()只接受将被解析为 HTML 并插入的字符串（如innerHTML）
To insert DOM element you can use .insertAdjacentElement()
要插入 DOM 元素，您可以使用 .insertAdjacentElement()
MDN: https://developer.mozilla.org//docs/Web/API/Element/insertAdjacentElement
MDN：https: //developer.mozilla.org//docs/Web/API/Element/insertAdjacentElement
回答by Jo?o Cunha
While you can't pass a DOM element directly, it's possible to pass element.outerHTMLto feed insertAdjacentHTML's second parameter with it's HTML string representation.
虽然您不能直接传递 DOM 元素，但可以element.outerHTMLinsertAdjacentHTML使用它的 HTML 字符串表示传递给 feed的第二个参数。
Example:
例子：
const parent = document.querySelector('.parent');
const child = document.createElement('p');
child.innerHTML = 'Awesome!';
parent.insertAdjacentHTML('beforeend', child.outerHTML);
// <div class="parent">
// <p>Awesome!</p>
// </div>
回答by adeneo
For insertAdjacentHTML, the documentation clearly states that the first argument mustbe of type string
对于insertAdjacentHTML，文档明确指出第一个参数必须是字符串类型
element.insertAdjacentHTML(position, text);
positionis the position relative to the element, and must be one of the following strings:
"beforebegin", "afterbegin", "beforeend", "afterend"
element.insertAdjacentHTML(position, text);
position是相对于元素的位置，必须是以下字符串之一：
“beforebegin”、“afterbegin”、“beforeend”、“afterend”
It's not very clear about what the second argument can be, but testing shows that toString()is executed internally on the second argument, so the answer is
关于第二个参数可以是什么不是很清楚，但是测试表明它toString()是在第二个参数内部执行的，所以答案是
yes, you can in most cases pass a DOM element as the second argument, but the real answer is no, it won't be appended to the page, instead you'll just get the string
是的，在大多数情况下，您可以将 DOM 元素作为第二个参数传递，但真正的答案是否定的，它不会附加到页面上，而只会得到字符串
[object HTMLDivElement]
as the DOM element is converted to a string, and that means the function always expects the second argument to be a valid stringof HTML, not a DOM element.
因为 DOM 元素被转换为字符串，这意味着该函数始终期望第二个参数是有效的 HTML字符串，而不是 DOM 元素。
Here's a quick test
这是一个快速测试
var d1 = document.getElementById('one');
var d3 = document.createElement('div');
d3.innerHTML = 'three';
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
d1.insertAdjacentHTML('afterend', d3);<div id="one">one</div>There are other methods available that are much more suitable for actual DOM elements, for instance appendChild, insertBeforeetc.
但是也有一些更适合实际的DOM元素可用其他方法，例如appendChild，insertBefore等等。
Which one to use depends on where the element is to be inserted etc, but inserting in the same place as the four options available in insertAdjacentHTMLis possible, and generally not very hard to do.
使用哪一个取决于要插入元素的位置等，但可以在insertAdjacentHTML与可用的四个选项相同的位置插入，并且通常不难做到。
There's also Element.insertAdjacentElement()which works exactly like insertAdjacentHTML, but accepts a DOM node instead of a string of HTML.
还有一个Element.insertAdjacentElement()和 完全一样insertAdjacentHTML，但接受一个 DOM 节点而不是一个 HTML 字符串。
