我可以使用 insertAdjacentHTML 插入 DOM 元素吗答案

【问题标题】：Can I use insertAdjacentHTML to insert DOM element我可以使用 insertAdjacentHTML 插入 DOM 元素吗
【发布时间】：2014-06-28 20:14:09
【问题描述】：

insertAdjacentHTML 需要 2 个参数：

位置（"beforebegin"、"afterbegin"、"beforeend"、"afterend"）
html（将从文本转换为 DOM）

我可以将 DOM 元素作为第二个参数传递吗？

【问题讨论】：

标签： javascript html dom

【解决方案1】：

虽然您不能直接传递 DOM 元素，但可以传递 element.outerHTML 以将其 HTML 字符串表示形式提供给 insertAdjacentHTML 的第二个参数。

例子：

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>

【讨论】：

【解决方案2】：

对于insertAdjacentHTML，文档明确指出第一个参数必须是字符串类型

element.insertAdjacentHTML(position, text);

position 是相对于元素的位置，必须是以下之一以下字符串：
“beforebegin”、“afterbegin”、“beforeend”、“afterend”

第二个参数可以是什么还不是很清楚，但是测试表明toString()是在第二个参数内部执行的，所以答案是

yes，在大多数情况下，您可以传递一个 DOM 元素作为第二个参数，但真正的答案是 no，它不会附加到页面上，相反，您只会得到字符串

[object HTMLDivElement]

因为 DOM 元素被转换为字符串，这意味着函数总是期望第二个参数是 HTML 的有效 字符串，而不是 DOM 元素。

这是一个快速测试

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);

&lt;div id="one"&gt;one&lt;/div&gt;

还有其他更适合实际 DOM 元素的方法可用，例如appendChild、insertBefore 等。

使用哪一个取决于要插入元素的位置等，但插入到与insertAdjacentHTML 中可用的四个选项相同的位置是可能的，而且通常不是很难做到。

还有Element.insertAdjacentElement()，其工作方式与insertAdjacentHTML 完全相同，但接受一个DOM 节点而不是HTML 字符串。

【讨论】：

谢谢你的回答，但我的问题是关于第二个论点。
@Yukulélé - 哦，好吧。编辑了答案

【解决方案3】：

.insertAdjacentHTML() 只接受将被解析为 HTML 并插入的字符串（如 innerHTML）

要插入 DOM 元素，您可以使用 .insertAdjacentElement()

MDN：https://developer.mozilla.org//docs/Web/API/Element/insertAdjacentElement

【讨论】：

为什么最好的答案一直到这里？