Javascript中如何用createDocumentFragment()方法创造节点

这篇文章主要介绍了Javascript中如何用createDocumentFragment()方法创造节点的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Javascript中如何用createDocumentFragment()方法创造节点文章都会有所收获，下面我们一起来看看吧。

　　Javascript createDocumentFragment()怎么创造节点

　　注意：文本碎片节点仅仅是一个集合，本身不包括任何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>

　　Javascript createDocumentFragment()怎么创造节点

　　实例演示：

　　?

　　#demo{

　　width:250px;

　　padding:0px 10px 10px 10px;

　　border:1px solid #ccc;

　　background-color:#ededed;

　　}

　　#demo div{

　　height:50px;

　　width:250px;

　　margin-top:10px;

　　text-align:center;

　　line-height:50px;

　　background-color:#ccc;

　　}

关于“Javascript中如何用createDocumentFragment()方法创造节点”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Javascript中如何用createDocumentFragment()方法创造节点”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。