动态创建标签并添加文本信息
<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代码量最少