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()方法創造節點問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。