innerHTML 会在 DOM 树中创建节点吗？答案

【问题标题】：Do innerHTML create nodes in the DOM tree?innerHTML 会在 DOM 树中创建节点吗？
【发布时间】：2012-12-05 00:56:29
【问题描述】：

如果我这样做：

document.getElementById("myDiv").innerHTML = "some_html_code";

这是否会像使用 appendChild() 一样在我的 DOM 三个中创建节点？

询问的原因是我正在创建一个内存使用率必须很低的移动应用程序。我不想创建很多节点。

【问题讨论】：

是的，它创建了节点。当你清空 div 时，它们会被删除。
要记住的一点是，使用innerHTML 会丢失您在#myDiv 中创建的所有事件处理程序。
@ChrisSobolewski 好点！而且你不能绑定新的事件处理程序（字符串中的内联处理程序除外）
有什么可以帮助决定使用哪个？ stackoverflow.com/questions/2305654/…
@Ian，它已添加到 dom，但我无法添加新的处理程序？

标签： javascript html dom memory

【解决方案1】：

大致相同

var div = document.getElementById("myDiv");

while( div.firstChild ) {
    div.removeChild( div.firstChild );
}

div.appendChild( document.createTextNode("a_html_string") );

当然，如果"html_string" 是指由复杂的 html 组成的字符串，那么当然节点是从 html 适当地创建的（元素节点、注释节点、文本节点等）。但是一个简单的文本字符串只是一个文本节点。

所以如果你的 html 字符串是'<div id="hello">world</div>'，那大概是：

var div = document.getElementById("myDiv");

while( div.firstChild ) {
    div.removeChild( div.firstChild );
}

var anotherDiv = document.createElement("div");
anotherDiv.setAttribute("id", "hello");
anotherDiv.appendChild(document.createTextNode("world"));
div.appendChild(anotherDiv);

一个看起来很单纯的.innerHTML setter 所发生的事情可能令人震惊，这甚至不包括解析 html。

重要的是要注意，这些都不是垃圾，所有这些创建的对象都是必需的。为确保您只创建必要的节点，请不要在节点之间使用不必要的空格。例如

<span>hello</span> <span>world</span>

是 3 个文本节点，但

<span>hello</span><span> world</span>

只有 2 个文本节点。

很久以前，我创建了一个facetious jsfiddle，它可以将 html 转换为“DOM 代码”，供所有那些 .innerHTML 讨厌的人使用。

【讨论】：

与@karaxuna 相同的评论 :-)
@Christophe 是的，我已经添加了更多解释：P
无论如何（在编辑之前）与 karaxuna 的评论完全不同
如果 OP 担心不必要的节点，那么应该注意.innerHTML 将创建空文本节点来表示空白，而您不太可能使用 DOM 方法创建这些节点。喜欢：'<div id="hello"> <a>world</a> </div>' 创建 5 个节点而不是预期的 3 个。
@user1689607 很棒的提示，我已将其添加到我的答案中。

【解决方案2】：

是的，innerHTML 将被解析并创建节点。没办法，DOM 是由节点组成的。

【讨论】：

没错！这应该是问题的答案。
同意，但我不认为 OP 试图避免“创建节点”（你的第二句话）
@Ian，我认为 OP 是。否则，问题中的“垃圾”是什么意思，为什么要声明内存消耗？
我认为它们的意思是显式创建节点所必需的“内存消耗”（而不是 innerHTML 的魔法）。当我重新阅读这个问题时，我明白你的意思，没关系:)

【解决方案3】：

它将创建字符串“a_html_string”并显示出来。但你也可以附加元素：

document.getElementById("myDiv").innerHTML = "<a> Link </a>"; // will be displayed "Link"

【讨论】：

我想你误解了，"a_html_string" 是一个 html 字符串，正如它所说:-)
"a_html_string" 是 "a_html_string" ，那么他应该写一个叫a_html_string的变量