DOM碎片节点

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>