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()方法创造节点问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。