javascript - innerHTML 是否在 DOM 树中创建节点？

Question

如果我这样做:

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

是否会像我使用 appendChild() 那样在我的 DOM 3 中创建节点？

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

Answer 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 的人使用。