JavaScript入门教程

JavaScript简介
JavaScript语法基础
JavaScript流程控制
JavaScript函数
面向对象编程
JavaScript事件
JavaScript DOM
正则表达式
JavaScript BOM
AJAX

专题分析

浏览器兼容性
JS优化
Web前端开发规范
编辑器推荐
总结和笔记

学习助手

对象参考手册
ECMAScript分析
数据中心
QQ交流群

Javascript createDocumentFragment()

createDocumentFragment() 方法用来创建一个文档碎片节点。

文档碎片节点是若干DOM节点的集合,可以包括各种类型的节点,如 元素节点、文本节点、注释节点 等。

注意:文本碎片节点仅仅是一个集合,本身不包括任何HTML元素。

每一次DOM节点的添加、删除和移动操作都会引起浏览器重新渲染HTML文档,如果这样的操作过多,不仅会浪费资源,可能还会出现“闪屏” 的现象。

为了减轻浏览器的负担,提高用户体验,最好将所有节点一次添加到DOM(HTML文档),文档碎片节点就派上了用场,可以先将所有节点添加到文档碎片节点,再将文档碎片节点添加到DOM(HTML文档)。

举例,将三个<p>标签一次添加到DOM:
<div id="demo">
    <div>点击这里添加新节点</div>
</div>
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
    var divFragment=document.createDocumentFragment(),
        div1=document.createElement("div"),
        div2=document.createElement("div"),
        div3=document.createElement("div");
    div1.appendChild(document.createTextNode("这是新节点 1"));
    div2.appendChild(document.createTextNode("这是新节点 2"));
    div3.appendChild(document.createTextNode("这是新节点 3"));
    divFragment.appendChild(div1);
    divFragment.appendChild(div2);
    divFragment.appendChild(div3);
   
    this.appendChild(divFragment);
}
</script>

实例演示:
点击这里添加新节点