js中幾種動態創建元素並設置文本內容的比較，及性能測試。

內容

• 1 appendChild (都兼容)
• 2.insertAdjacentHTML (都兼容)
• 3.innerHTML (都兼容)
• 4.createDocumentFragment (都兼容)

動態創建標簽並添加文本信息

1. <ul>
2. </ul>

1 appendChild (都兼容)

1. var ul = document.getElementsByTagName("ul")[0];
2. for(var i = 0; i < 5; i++) {
3. var li = document.createElement("li");
4. li.appendChild(document.createTextNode("text"));
5. ul.appendChild(li); //逐個添加列表項，會導致瀏覽器的反復渲染
6. }

2.insertAdjacentHTML (都兼容)

1. var ul = document.getElementsByTagName("ul")[0];
2. for(var i = 0; i < 5; i++) {
3. ul.insertAdjacentHTML("afterbegin", "<li>text</li>")
4. }

3.innerHTML (都兼容)

1. var ul = document.getElementsByTagName("ul")[0],
2. html = "";
3. for(var i = 0; i < 5; i++) {
4. html += "<li>text</li>";
5. }
6. ul.innerHTML = html;

4.createDocumentFragment (都兼容)

1. var ul = document.getElementsByTagName("ul")[0],
2. dF = document.createDocumentFragment();//創建文檔片段
3. for(var i = 0; i < 5; i++) {
4. var li = document.createElement("li");
5. li.appendChild(document.createTextNode("text"));
6. dF.appendChild(li); //用文檔片段來保護創建的列表項，然后再一次性添加到文檔中，這里的文檔片段相當於一個倉庫
7. }
8. ul.appendChild(dF);
9. ul = null,
10. dF = null;

下面是幾種方法的性能對比

測試網站 https://jsperf.com

測試結果以每秒鍾執行測試代碼的次數（Ops/sec）顯示，這個數值越大越好。除了這個結果外，同時會顯示測試過程中的統計誤差，以及相對最好的慢了多少（%），統計誤差也是非常重要的指標

本人只在chrome上 測試了。數據可能不准確。你也可以在ff ，ie或其他瀏覽器測試。

insertAdjacentHTML    vs     append

insertAdjacentHTML     vs innerHTML

 

insertAdjacentHTML  vs createDocumentFragment

appendChild   vs   createDocumentFragment

終上所述幾種方法依我個人的測試得出結論

innerHTML>>insertAdjacentHTML   >appendChild   >createDocumentFragment

所以最好使用innerHTML（性能最優越）來動態創建標簽。   insertAdjacentHTML代碼量最少