appendChild，insertAdjacentHTML和innerHTML有什么区别

Question

我想知道appendChild，insertAdjacentHTML和innerHTML之间的区别。

我认为他们的功能相似，但我想在使用方面清楚地理解而不是执行速度。

1. 例如，我可以使用innerHTML将新标记或文本插入HTML中的另一个标记中，但它会替换该标记中的当前内容而不是追加。

2. 如果我想这样做（不替换）我需要使用insertAdjacentHTML，我可以管理我想要插入新元素的位置（beforebegin，{{1 }}，afterbegin，beforeend）

3. 最后一个如果我想创建（不在当前标签中插入）新标签并将其插入HTML我需要使用afterend。

---

我理解正确吗？或者这三者有什么区别？

Answer 1

• element.innerHTML

  来自MDN：

    

  innerHTML设置或获取描述元素后代的HTML语法。

  写入 innerHTML 时，会覆盖源元素的内容。这意味着必须加载和重新解析HTML。这在使用内部循环时效率不高。

• node.appendChild

  来自MDN：

    

  将节点添加到指定父节点的子节点列表的末尾。如果该节点已存在，则将其从当前父节点中删除，然后添加到新的父节点。

  所有浏览器都支持此方法，并且是将节点，文本，数据等插入DOM的更简洁方法。

• element.insertAdjacentHTML

  来自MDN：

    

  将指定的文本解析为HTML或XML，并将结果节点插入到指定位置的DOM树中。 [...]

  所有浏览器也支持此方法。

Answer 2

appendChild方法向DOM添加元素。

innerHTML属性和insertAdjacentHTML方法接受字符串而不是元素，因此在将它们放入DOM之前，它们必须解析字符串并从中创建元素。

innerHTML属性既可用于获取和设置元素内容的HTML代码。

Answer 3

@Guffa确实解释了主要区别，即innerHTML和insertAdjacentHTML需要在添加到DOM之前解析字符串。

此外，请参阅此jsPerf，它会告诉您通常appendChild对其提供的工作更快。

Answer 4

我知道的innerHTML可以抓取'内部html'，appendChild和insertAdjacentHTML不能;

示例：

<div id="example"><p>this is paragraph</p><div>

JS：

var foo = document.getElementById('example').innerHTML;

现在结束

foo = '<p>this is paragraph</p>';

Answer 5

<强> DOCS：

appendChild

insertAdjacentHTML

innerHtml

innerHTML vs appendChild() performance

insertAdjacentHTML vs innerHTML vs appendChild performance