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代码量最少