ノードを作成/追加してくださいinnerHTML

Question

他の人に重複して使う理由がありますか？私が知る限り、create/appendノードは単に無効なコードを作成するのを防ぎ、innerHTMLは複数のノードを一度に注入することができます。

私はいくつかのタグを挿入する必要があることを考えれば、innerHTMLを使用するのが理にかなっているようです。誰かが別のテイクを持っていますか？

Answer 1

これは、常に論争の引数である部分的innerHTMLの起源は標準からやや疑わしいという理由視点。私はQuirksModeの記事はまだ関連性があると思うが、私はそれが更新されて見るのが大好きだ。おそらくcontactppkですが、私は彼が忙しいと確信しています。 Web開発で行った前提条件のパフォーマンステストの恩恵を受けることができます。終わりの主張では、ハードデータが必要であることを証明する必要があります。

とにかく、私はいくつかの検索を行い、このディスカッションに関連する興味深い記事を見つけました。以前はDocumentFragmentsのことを覚えていませんでしたが、本当に面白いです。

Improve your jQuery - 25 excellent tips

Speed test: innerHTML versus DOM manipulation

jQuery Performance Rules

• DOM DocumentFragments ...ブラウザ上でいくつかの現在のデータを収集したい人のためにそれを価値が実際の速度をテストし、テスト、

Answer 2

特定のプラットフォームでは、高価なHTML解析を行う必要がないため、innerHTMLではなくDOM関数を使用してパフォーマンスを向上させることができます。

Answer 3

これは目標によって異なります。

DOMメソッドを使用してドキュメントにhtmlを挿入すると、それらの要素を挿入する前後にそれらの要素をさらに操作できます。

Answer 4

DOMを介してノードを作成するのは標準化されていますが、innerHTMLはデファクトスタンダードに過ぎません。私はinnerHTMLがより速くできることを読んだ。

さらに良い方法は、DOM操作のためにjQueryのようなライブラリを使用することです。ほとんどのブラウザ間の非互換性を考慮し、DOMメソッドを使用するよりも読みやすくなります。

Answer 5

パフォーマンスの問題ならば、それはinnerHTMLは特にMSIEで、比較的高速であることを知って良いことだ：http://www.quirksmode.org/dom/innerhtml.html

それはOO」本当に、もともと「Microsoft独自の」プロパティおよび/またはないというのが悪いイメージを持っています"

Answer 6

私はいくつかのタグを挿入する必要があることを考えれば、innerHTMLを使用するのが理にかなっているようです。

「複数」のみ？それでスピードは問題ではありません。あなたが何をやっているのか考えなければならないのは何百もの人を創造するときです。実際に問題が発生するわけではありません。子ノードリストの操作は、余分な要素を追加するにつれて遅くなり、遅くなります。

追加については、実際には選択肢はありません。既存のコンテンツを失うことなくinnerHTMLを設定することはできません。フォームコンテンツ、JavaScriptプロパティ/参照、イベントハンドラなどのシリアル化不可能なデータを消去して再シリアライズして再解析しないと、別の要素のinnerHTMLを設定し、各子を1つずつ移動させます。これは多くのフレームワークが行うことであり、通常は手動のcreate-and-appendChildよりも遅くなります。

あなたの状況（具体的には、ターゲット要素にすでにいくつの子ノードがあり、追加する予定ですか？）に応じて、子要素を持つDocumentFragmentで操作を細かく操作する方が速くなる場合があります要素の子要素にすべて1つずつ追加することができます。これははるかに高速です。残念ながら、innerHTMLをDocumentFragmentに設定することはできません。

Rangeオブジェクトを使用して一度にHTMLの読み込みを高速化するハッキングもありますが、残念ながら範囲はブラウザ間で大きく変動します。しかし、誰かが、IEのrange.pasteHTMLとW3のrange.extractContentsから高速のappend-htmlを構築できるはずです。それのため誰ですか？私の知る限り

、作成/追加ノード単にあなたが潜在的に無効なマークアップは、単に一部のブラウザでアプリケーションの中断を意味するものではありません無効なコード

を作成することを防止します。あなたは盲目的に馬鹿のようにエスケープせずに一緒にHTMLを継ぐているとき：

element.innerHTML= '<a href="'+url+'">'+title+'</a>'; 

あなたは、サーバー側の1と同じくらい悪いですクライアント側のクロスサイトスクリプティングのセキュリティホールを持っています。

要素を作成し、その内容を別々の手順で設定することで、妥協することはもちろんありません。たとえば：

element.innerHTML= '<table>'+'<tr><td>X</td><td><a href="#">go</a></td></tr>'.repeated(urls.length)+'</table>'; 
for (var i= 0; i<urls.length; i++) { 
    var row= element.firstChild.rows[i]; 
    row.cells[0].firstChild.data= urls[i]; 
    row.cells[1].firstChild.href= urls[i]; 
} 

（string.repeatedはJavaScriptの標準ではありませんが、その使用は、ここで明らかである。）

Answer 7

あなたがこのトリックを使用すれば、DOM操作はもっと速くなります！

これは遅い：

var target = document.getElementById('whatever'); 
for (a = 0; a<10000; a++) { 
var newnode = document.createElement('div'); 
newnode.textContent = a; 
target.appendChild(newnode) } 

これは高速である：リフレッシュがそれぞれ形成されているよう

var target = document.createElement('span') 
for (a = 0; a<10000; a++) { 
var newnode = document.createElement('div'); 
newnode.textContent = a; 
target.appendChild(newnode) } 
document.getElementById('whatever').appendChild(target); 

最初の例は、既に体内に収容されているノードに新しく作成されたノードを追加時間。

2番目の例では、新しく作成したノードをボディのスコープ内にない「バッファ」ノードに追加するため、バッファノードをボディのスコープ内に配置するまでリフレッシュは行われません。自分でそれを試してみてください！