javascript document.createElement或HTML標記

Question

我對編寫代碼的風格很困惑。 我想知道在文檔中插入HTML標記的實用且有效的方法。

使用Javascript：

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

要么

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等（或類似的方法）。 第二個是減少瀏覽器的工作量，因為你直接說明了你想要它做什么。

查看jsPerf的比較

根據jsPerf 選項1比選項2慢大約3倍 。

關於可維護性選項1的主題更容易編寫，但稱我是老式的，我更喜歡使用選項2，因為它感覺更安全。

編輯

在一些結果開始出現之后，不同的結果激起了我的好奇心。 我安裝了每個瀏覽器兩次運行測試，以下是所有測試后jsPerf結果的屏幕截圖（操作/秒，越高越好）。

因此瀏覽器在處理這兩種技術方面似乎差別很大。 平均而言選項2似乎更快，因為Chrome和Safari的大差距有利於選項2.我的結論是我們應該使用最舒適或最適合您組織的標准，而不用擔心哪個更有效。

這個練習告訴我的主要是不要使用IE10，盡管我聽說過它很棒的東西。