使用DocumentFragment动态创建一个List

DocumentFragment是一种轻量级的文档，在文档中没有任何标记，可以包含和控制文本,但不会占用额外的资源。

一般操作一个ul，并且给ul动态添加li节点，会使用下面的方式：

<ul id="list"></ul>

var ul = document.getElementById('list');
var li = null;

for(var i = 0; i<3; i++){
    li = document.createElement('li');
    li.appendChild( document.createTextNode('hello world' + i) );
    ul.appendChild(li);
}

这样做会有个弊端。会导致浏览器反复渲染新的节点。

可以使用DocumentFragment来保存创建的列表项，然后一次性把它们添加到文档里。

var fragment = document.createDocumentFragment();
var ul = document.getElementById('list');
var li = null;

for(var i = 0; i<3; i++){
    li = document.createElement('li');
    li.appendChild( document.createTextNode('hello world' + i) );
    fragment.appendChild(li);
}

ul.appendChild(fragment)

这两种方式，最终呈现的效果是相同的。

文档片段DocumentFragment中的列表项会被删除并且转移到ul中。