js中几种动态创建元素并设置文本内容的比较，及性能测试。

内容

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

1. <ul>
2. </ul>

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. }

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

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;

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;