DOM通过创建碎片节点document.createDocumentFragment()：
定义：碎片节点是一个虚拟的容器，存在于内存中。
目的：页面加载时优化加载，减少内存消耗。
使用频率一般。
例1：在DIV中添加UL，UL元素中添加LI，LI中添加文本，最后将DIV添加在碎片节点；
function fun4(){
var li=["列表1","列表2","列表3"];
var sp=document.createDocumentFragment();
var div=document.getElementById("div1");
var ul=document.createElement("ul");
for(var i=0;i<li.length;i++{
var li1=document.createElement("li");
var wb=document.createTextNode(li[i]);
li1.appendChild(wb);
ul.appendChild(li1);
div.appendChild(ul);
sp.appendChild(div);
}
document.body.appendChild(sp);
}
按钮4
注：appendChild（element），当element存在于原文档时，会将原文档中的节点删除；
例2：在DIV中添加2个UL，UL元素中添加LI，LI中添加文本；
function fun2(){
var li=["列表1","列表2","列表3"];
var sp=document.createDocumentFragment();
var div=document.getElementById("div1");
for(var u=0;u<2;u++){
var ul=document.createElement("ul");
for(var i=0;i<li.length;i++){
var li1=document.createElement("li");
var wb=document.createTextNode(li[i]);
li1.appendChild(wb);
ul.appendChild(li1);
}
div.appendChild(ul);
}
document.body.appendChild(div);
}
</script>
<button onclick="fun2()">按钮2</button>
