使用createDocumentFragment()创建DOM片段

参考文章：
https://www.imooc.com/wenda/detail/346318
https://www.cnblogs.com/echolun/p/10098752.html

我一般创建DOM节点都是用createElement（）或者是createTextNode（），但不知道如何创建DOM片段，也不知道为什么要创建DOM片段。

回答：

理由：避免浏览器反复渲染，提高性能等。

假设创建一个ul元素并添加3个li，然后在将其添加到文档中；可以使用一个文档片段来保存创建的列表项，然后一次性的将他们添加到文档中。

var fragment=document.createDocumentFragment();
var ul=document.createElement("ul");
var li=null;
for(var i=0;i<3;i++){
    li=document.createElement("li");
    li.appendChild(document.createTextNode("item"+i));
    ul.appendChild(li);
}
fragment.appendChild(ul);
document.body.appendChild(fragment);

上面是创建了一个ul然后一并添加到文档中的，如果已经存在一个ul在文档中，只是要往里面添加数个li，此时，如果不用fragment，而是逐个添加到ul上，那么加一个li，浏览器就会渲染一下，性能就会大大受损。