文档碎片

通过JS操作DOM节点可能以节点为单位进行,比如添加节点,可以createElement,createTextNode,然后用appendChild把文本节点和容器节点绑定在一起,然后再用appendChild或insertBefor添加到DOM树中.但如果要往DOM树中动态添加大量的节点.就会很麻烦.

例如:

var arrText = ["one","two","three","four","five","six","seven","eight","nine","ten"];

for(var i = 0;i<arrText.length;i++){

    var oP = document.createElement("p");

    ////var oText = document.createTextNode(arrText[i]);

    /////oP.appendChild(oText);

    oP.innerHTML = arrText[i]; 

    document.body.appendChild(oP);

}

这段代码调用了十次document.body.appendChild(),每次都要产生一次页面刷新.很麻烦.所以可以用"文档碎片":

var arrText = ["one","two","three","four","five","six","seven","eight","nine","ten"];

var oFragment = document.createDocumentFragment();

for(var i = 0;i<arrText.length;i++){

    var oP = document.createElement("p");

    ////var oText = document.createTextNode(arrText[i]);

   /////oP.appendChild(oText);

    oP.innerHTML = arrText[i];    

    oFragment.appendChild(oP);

}

document.body.appendChild(oFragment);

 

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

 

创建文本碎片:var oFrag=document.createDocumentFragment();
给碎片添加内容:
var op=document.createElement("div");
var oText=document.createTextNode("碎片");
op.appendChild(oText);
oFrag.appendChild(op);
将碎片绑定到DOM中:document.body.appendChild(oFrag);//当然也可以不直接给body绑定,也可以给其他的节点;

好象IE对文档碎片的支持不怎么样.如果显示不出来可以这样:先获得碎片的内容:oFrag.innerHTML,然后再将内容赋给要绑定碎片的对象.

注意:绑定碎片实际上是把碎片的内容附加到被绑定节点下面.并不会产生类似<fragment></fragement>的节点;

 

转自：http://blog.163.com/wangxiaoxia1221@126/blog/static/1076801742011911101153576/