Question

如果我这样做：

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

会在我的DOM中创建三个节点，就像我使用appendChild()？

一样

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

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仇恨。

Answer 2

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

Answer 3

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

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

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

3 个答案: