|
我在《Javascript 動態(tài)插入技術(shù)》中,就介紹了用innerHTML轉(zhuǎn)換為文檔碎片的技術(shù)了,這個被各大類庫所取用。但事實上,如果我們的字符串沒有th,tbody,col等需要通過包裝才能動態(tài)生成的標(biāo)簽,也沒有那個特?zé)┤说膕cript標(biāo)簽,我們在提高性能上還是有許多方法,如insertAdjacentHTML。但想使用insertAdjacentHTML,限制非常多的,如在IE下避開innerHTML為只讀的元素,F(xiàn)F需要很高的版本才支持,加之調(diào)用對象(如jQuery)的元素往往只能是節(jié)點,不能是字符串,因此很多情況下,我們還是先需要把它轉(zhuǎn)換為節(jié)點集合,而今天我介紹的是使用createContextualFragment直接將字符串轉(zhuǎn)換為文檔碎片!
傳統(tǒng)的innerHTML方式會產(chǎn)生一個多余的div元素做轉(zhuǎn)換器,然后再使用createDocumentFragment創(chuàng)建一個文檔碎片,一個個節(jié)點轉(zhuǎn)移上去。如果使用createContextualFragment就可以避免這一步了。
//http://www.cnblogs.com/rubylouvre/archive/2011/04/15/2016800.html
var str = '<div><strong>test</strong></div>';
var range =document.createRange();
range.selectNodeContents(document.documentElement);
var fragment =range.createContextualFragment(str);
document.body.appendChild(fragment);
it知識庫:高效將字符串轉(zhuǎn)換為文檔碎片(JavaScript),轉(zhuǎn)載需保留來源!
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請第一時間聯(lián)系我們修改或刪除,多謝。