動態創建標簽並添加文本信息
- <ul>
- </ul>
1 appendChild (都兼容)
- var ul = document.getElementsByTagName("ul")[0];
- for(var i = 0; i < 5; i++) {
- var li = document.createElement("li");
- li.appendChild(document.createTextNode("text"));
- ul.appendChild(li); //逐個添加列表項,會導致瀏覽器的反復渲染
- }
2.insertAdjacentHTML (都兼容)
- var ul = document.getElementsByTagName("ul")[0];
- for(var i = 0; i < 5; i++) {
- ul.insertAdjacentHTML("afterbegin", "<li>text</li>")
- }
3.innerHTML (都兼容)
- var ul = document.getElementsByTagName("ul")[0],
- html = "";
- for(var i = 0; i < 5; i++) {
- html += "<li>text</li>";
- }
- ul.innerHTML = html;
4.createDocumentFragment (都兼容)
- var ul = document.getElementsByTagName("ul")[0],
- dF = document.createDocumentFragment();//創建文檔片段
- for(var i = 0; i < 5; i++) {
- var li = document.createElement("li");
- li.appendChild(document.createTextNode("text"));
- dF.appendChild(li); //用文檔片段來保護創建的列表項,然后再一次性添加到文檔中,這里的文檔片段相當於一個倉庫
- }
- ul.appendChild(dF);
- ul = null,
- 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代碼量最少