5

私がこれを行う場合：

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

使用した場合と同じように、DOM 3にノードが作成され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);

.innerHTML単純で無害に見えるセッターでどれだけ多くのことが起こっているかはおそらく衝撃的であり、これには html の解析も含まれていません。

これはゴミではなく、作成されたすべてのオブジェクトが必要であることに注意することが重要です。必要なノードのみを作成していることを確認するには、ノード間に不要な空白を使用しないでください。例えば

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

は 3 つのテキスト ノードですが、

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

2 つのテキスト ノードのみです。

ずっと前に、 .innerHTML を嫌うすべての人のために、html を「DOM コード」に変換する面白い jsfiddleを作成しました。

于 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 に答える