對(duì)于節(jié)點(diǎn)的創(chuàng)建innerHTML是一個(gè)很高效的接口。jQuery在節(jié)點(diǎn)操作上使用了innerHTML，創(chuàng)建效率上來(lái)說(shuō)至少比createElement快了2-10倍不等，而且還能一次性生成一堆的節(jié)點(diǎn)，但是隨之而來(lái)就有一些兼容性問(wèn)題，
我總結(jié)了有以下幾點(diǎn)，當(dāng)然兼容上也結(jié)合了jQuery的解決方案。
jQuery的節(jié)點(diǎn)操作最終是需要轉(zhuǎn)化成文檔碎片也就是要通過(guò)buildFragment()方法處理的，所以innerHTML兼容的修復(fù)也自然在buildFragment方法中。
我們弄清了緣由再去分析，其實(shí)整個(gè)修正的代碼就很簡(jiǎn)單了。
1：首先無(wú)作用域的問(wèn)題，通過(guò)文檔碎片創(chuàng)建一個(gè)div的包含容器，讓所有的元素都被div元素給包含起來(lái)，包括script，style等無(wú)作用域的元素，很好的解決了
tmp = tmp || fragment.appendChild(context.createElement("div"));
tmp.innerHTML = elem
2：針對(duì)不支持innerHTML屬性的元素，給單獨(dú)提出來(lái)，通過(guò)正則抽出來(lái)這個(gè)節(jié)點(diǎn)名字去處理
wrapMap = ｛
tr: [2, "<table><tbody>", "</tbody></table>"],
｝
tag = /<([\w:]+)/.exec(‘<tr>慕課網(wǎng)</tr>’)
wrap = wrapMap[tag] || wrapMap._default;
tmp.innerHTML = wrap[1] + elem.replace(rxhtmlTag, "<$1></$2>") + wrap[2];
如果遇到wrapMap[‘tr’]的標(biāo)簽就會(huì)自動(dòng)包裝一層節(jié)點(diǎn)，這樣達(dá)到支持。
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
打開(kāi)微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書(shū)簽
舉報(bào)