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

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

創建時的性能問題。使用不多，可做了解

?

使用需要三個步驟

1.創建一個文檔片段

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

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

?

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

解決方法：對于簡單結構，直接追加，沒有任何問題

? ? ? ? ? ? ? ? ? 對于復雜結構，先用html的結構創建好，再放到代碼片段中

簡單結構

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

復雜結構

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

?

轉載于:https://www.cnblogs.com/qdxbls/p/11151725.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。