javascript document.createElementまたはHTMLタグ

Question

次のスタイルのコードを書くのは混乱します。私は実用と効率的な文書にHTMLタグを挿入する方法を知りたいです。

Javascriptを：

document.getElementById('demoId').innerHTML='<div>hello world and <a>click me</a> also</div>'; 

OR

var itd=document.createElement('div'), 
    ita=document.createElement('a'), 
    idt=document.createTextNode('hello world'); 
    iat=document.createTextNode('click me'); 
    idn=document.createTextNode('also'); 

    ita.appendChild(iat); 
    itd.appendChild(idt); 
    itd.appendChild(ita); 
    itd.appendChild(idn) 

    docuemtn.getElementById('demoId').appendChild(itd); 

最速かつ最高の方法ですか？

Answer 1

それぞれが何をしているのかを考えてみてください。最初の文字列を解析し、解析された文字列の出力に基づいてdocument.createElement,document.appendChildなど（または同様のメソッド）を呼び出しています。 2つめは、ブラウザー上の作業負荷を軽減することです。

See a comparison on jsPerf

jsPerf オプション1によればオプション2よりも約3倍遅いです。

保守性オプション1の話題は書いてもはるかに簡単ですが、古き良き私に電話をかけてください。オプション2を使うほうが安全だと感じています。

編集

いくつかの結果がでてくる開始した後、異なる結果が私の好奇心をそそりました。私はインストールされた各ブラウザでテストを2回実行しました。ここではすべてのテスト（操作/秒、より高い方が良い）後のjsPerfからの結果のスクリーンショットがあります。

ので、ブラウザでは、彼らは2つの手法を処理する方法が大きく異なるように見えます。平均的にオプション2は、ChromeとSafariの大きなギャップがあるため、選択肢2のほうが速いと思われます。私の結論は、あなたの組織の基準に最も適しているか、どちらがより効率的かを心配する必要はありません。

この練習が私を教えた主なものは、私はそれについて聞いたことが素晴らしいものにもかかわらず、IE10を使用しないことです。