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

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创建的.但是简单的文本字符串只是一个文本节点.

所以如果你的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);

一个简单的无辜看起来的.innerHTMLsetter 可能会发生多少令人震惊的事情,甚至不包括解析html.

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

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

是3个文本节点但是

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

只有2个文本节点.

很久以前我创建了一个滑稽的jsfiddle,将html转换为所有这些的"DOM代码".innerHTML仇恨.