5

如果我这样做：

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

如果我使用它会在我的 DOM 三个中创建节点appendChild()吗？

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

4

3 回答 3

7

它与

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);

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

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

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

是 3 个文本节点，但

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

只有 2 个文本节点。

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

于 2012-12-04T16:24:49.863 回答
4

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

于 2012-12-04T16:24:56.650 回答
1

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

document.getElementById("myDiv").innerHTML = "<a> Link </a>"; // will be displayed "Link"
于 2012-12-04T16:21:19.137 回答