19

appendChild我想知道,insertAdjacentHTML和之间有什么区别innerHTML。

我认为它们的功能相似，但我想清楚地了解用法而不是执行速度。

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

  2. 如果我想这样做（而不是替换），我需要使用insertAdjacentHTML并且我可以管理我想要插入新元素的位置（beforebegin, afterbegin, beforeend, afterend）

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

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

4

5 回答 5

22

  • element.innerHTML

    来自 MDN：

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

    写入时innerHTML，它将覆盖源元素的内容。这意味着必须加载和重新解析 HTML。这不是很有效，尤其是在使用内部循环时。

  • node.appendChild

    来自 MDN：

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

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

  • element.insertAdjacentHTML

    来自 MDN：

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

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

……

于 2013-04-21T01:25:50.697 回答
9

这些appendChild方法将元素添加到 DOM。

innerHTML属性和方法采用insertAdjacentHTML字符串而不是元素，因此它们必须解析字符串并从中创建元素，然后才能将它们放入 DOM。

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

于 2013-04-21T01:22:41.420 回答
3

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

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

于 2015-06-08T10:11:17.593 回答
1

我知道的一个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>';
于 2013-04-21T01:11:41.057 回答