Javascript中如何用createDocumentFragment()方法創(chuàng)造節(jié)點(diǎn)

這篇文章主要介紹了Javascript中如何用createDocumentFragment()方法創(chuàng)造節(jié)點(diǎn)的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇Javascript中如何用createDocumentFragment()方法創(chuàng)造節(jié)點(diǎn)文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

　　Javascript createDocumentFragment()怎么創(chuàng)造節(jié)點(diǎn)

　　注意：文本碎片節(jié)點(diǎn)僅僅是一個(gè)集合，本身不包括任何HTML元素。

　　每一次DOM節(jié)點(diǎn)的添加、刪除和移動(dòng)操作都會(huì)引起瀏覽器重新渲染HTML文檔，如果這樣的操作過(guò)多，不僅會(huì)浪費(fèi)資源，可能還會(huì)出現(xiàn)“閃屏” 的現(xiàn)象。

　　為了減輕瀏覽器的負(fù)擔(dān)，提高用戶體驗(yàn)，最好將所有節(jié)點(diǎn)一次添加到DOM(HTML文檔)，文檔碎片節(jié)點(diǎn)就派上了用場(chǎng)，可以先將所有節(jié)點(diǎn)添加到文檔碎片節(jié)點(diǎn)，再將文檔碎片節(jié)點(diǎn)添加到DOM(HTML文檔)。

　　舉例，將三個(gè)p>標(biāo)簽一次添加到DOM：

　　div id="demo">

　　div>點(diǎn)擊這里添加新節(jié)點(diǎn)/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("這是新節(jié)點(diǎn) 1"));

　　div2.appendChild(document.createTextNode("這是新節(jié)點(diǎn) 2"));

　　div3.appendChild(document.createTextNode("這是新節(jié)點(diǎn) 3"));

　　divFragment.appendChild(div1);

　　divFragment.appendChild(div2);

　　divFragment.appendChild(div3);

　　this.appendChild(divFragment);

　　}

　　/script>

　　Javascript createDocumentFragment()怎么創(chuàng)造節(jié)點(diǎn)

　　實(shí)例演示：

　　?

　　#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;

　　}

關(guān)于“Javascript中如何用createDocumentFragment()方法創(chuàng)造節(jié)點(diǎn)”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“Javascript中如何用createDocumentFragment()方法創(chuàng)造節(jié)點(diǎn)”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。