关于documentFrgament 文档片段的简单理解
生活随笔
收集整理的這篇文章主要介紹了
关于documentFrgament 文档片段的简单理解
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 8086之8253芯片仿真
- 下一篇: Swiper使用心得