documentFragment 即文檔片段，也可以理解為是一個暫時儲存數(shù)據(jù)的倉庫。

好處： 可以將多行代碼一次性的放到文檔中，減少頁面的渲染次數(shù)，用于提高

創(chuàng)建時的性能問題。使用不多，可做了解

?

使用需要三個步驟

1.創(chuàng)建一個文檔片段

2.將元素追加到這個文檔片段中

3.將文檔片段追加到頁面中??

?

不過也有缺點：不支持innerHTML屬性??

解決方法：對于簡單結(jié)構(gòu)，直接追加，沒有任何問題

? ? ? ? ? ? ? ? ? 對于復雜結(jié)構(gòu)，先用html的結(jié)構(gòu)創(chuàng)建好，再放到代碼片段中

簡單結(jié)構(gòu)

var df = document.createDocumentFragment();// 創(chuàng)建簡單結(jié)構(gòu)：例如10個divfor (var i = 0; i < 10; i++) {var div = document.createElement('div');div.innerText = '這是div';// 將需要創(chuàng)建的元素添加到df中 df.appendChild(div);}

復雜結(jié)構(gòu)

// 創(chuàng)建復雜結(jié)構(gòu): 例如 ul>li*5 設置不同內(nèi)容 ol>li*5 不同內(nèi)容var ul = document.createElement('ul');ul.innerHTML ='<li title="abc"><a href="xx18.html">內(nèi)容111</a></li>\<li class="hehe"><a href="xx21.html">內(nèi)容266</a></li>\<li class="hehe"><a href="xx23.html">內(nèi)容312</a></li>\<li title="abc"><a href="xx44.html">內(nèi)容14</a></li>\<li><a href="xx12.html">內(nèi)容52</a></li>';var ol = document.createElement('ol');ol.innerHTML ='<li title="abc"><a href="xx128.html">內(nèi)容1211</a></li>\<li class="hehe"><a href="xx221.html">內(nèi)容2626</a></li>\<li class="hehe"><a href="xx23.html">內(nèi)容3122</a></li>\<li title="abc"><a href="xx44.html">內(nèi)容124</a></li>\<li><a href="xx12.html">內(nèi)22容52</a></li>'; df.appendChild(ul);df.appendChild(ol);// 將df設置到頁面中顯示document.body.appendChild(df);

?

轉(zhuǎn)載于:https://www.cnblogs.com/qdxbls/p/11151725.html

總結(jié)

以上是生活随笔為你收集整理的关于documentFrgament 文档片段的简单理解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。