问题：JS中的文档碎片

在浏览器中，我们通常用innerHTML()或者appendChild()向页面中插入DOM节点，例如：

for(var i=0;i<5;i++){
 var op = document.createElement("span"); 
 var oText = document.createTextNode(i); 
 op.appendChild(oText); 
 document.body.appendChild(op); 
}

但是，如果当我们要向document中添加大量数据时(比如1w条)，如果像上面的代码一样，逐条添加节点，这个过程就可能会十分缓慢。

当然，你也可以建个新的节点，比如说div，先将oP添加到div上，然后再将div添加到body中，但这样要在body中多添加一个<div></div>.但文档碎片不会产生这种节点。

var oDiv = document.createElement("div"); 
for(var i=0;i<10000;i++){ 
 var op = document.createElement("span"); 
 var oText = document.createTextNode(i); 
 op.appendChild(oText); 
 oDiv.appendChild(op); 
} 
document.body.appendChild(oDiv);

为了解决这个问题，JS引入了createDocumentFragment()方法，它的作用是创建一个文档碎片，把要插入的新节点先附加在它上面，然后再一次性添加到document中。

代码如下：

//先创建文档碎片
var oFragmeng = document.createDocumentFragment(); 
for(var i=0;i<10000;i++){ 
 var op = document.createElement("span"); 
 var oText = document.createTextNode(i); 
 op.appendChild(oText); 
 //先附加在文档碎片中
 oFragmeng.appendChild(op); 
} 
//最后一次性添加到document中
document.body.appendChild(oFragmeng);