John Resig（jQuery的作者）在2008年的時候曾經(jīng)嘗試將elment.insertAdjacentHTML引入jQuery，不過他最終放棄了。主要原因在于：

• 其在IE6中不支持向table，tbody，thead或者tr插入html，否則會拋出錯誤。
• 不支持XML文檔。

不過當(dāng)時，這一由IE4.0開始出現(xiàn)的接口已經(jīng)進入了HTML5的接口名單，將會有更多瀏覽器實現(xiàn)該接口，下面便是目前桌面瀏覽器的支持情況：

?

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	8.0 (8.0)	4.0	7.0	4.0 (527)

?

但是，我們?yōu)槭裁磿P(guān)注這一接口呢？

?

比element.innerHTML更好的性能

測試結(jié)果表明，element.insertAdjacentHTML在大部分情況下有比element.innerHTML更好的性能：

http://jsperf.com/insertadjacenthtml-perf/4

這可能是比Document Fragments更好的HTML文檔插入方案，因為我們知道Document Fragments在某些IE版本中的表現(xiàn)比較糟糕（看來IE的實現(xiàn)方式和別的都不太一樣啊……）。

這給我們得模板優(yōu)化提供了可行而簡易的方案。

好吧，那element.insertAdjacentHTML這接口怎么用呢？

?

在指定位置插入HTML

element.insertAdjancentHTML(position, html)

需要傳入字符串參數(shù)position，以及字符串參數(shù)html代碼。我們可以對照jQuery的HTML插入方法，得到這一position的對照關(guān)系：

.insertAdjacentHTML("beforeBegin", ...) ?—— ?before

.insertAdjacentHTML("afterBegin", ...) ?—— ?prepend

.insertAdjacentHTML("beforeEnd", ...) ?—— ?append

.insertAdjacentHTML("afterEnd", ...) ?—— ?after

即：

beforeBegin：在該元素前插入

afterBegin：在該元素第一個子元素前插入

beforeEnd：在該元素最后一個子元素后面插入

afterEnd：在該元素后插入

?不過，當(dāng)元素是空的時候，其和innerHTML就可以很相像了，比如：

      
        var
      
       menu = document.createElment("div"
      
        );
menu.insertAdjacentHTML(
      
      "afterEnd"
      
        ,
    
      
      "<p>Hello world!</p>");
    

這里就和menu.innerHTML('<p>Hello world!</p>')是一樣的。

?

總結(jié)?

主要還是看需求。由于我們的項目可以不考慮IE6，所以IE6的問題就不是問題了。而且模板引擎不會插入XML Document，所以第二個問題也不是問題了。

?

參考資料

DOM insertAdjacentHTML ?.?John Resig

element.insertAdjacentHTML ?. MDN

?

冷門Javascript API——element.insertAdjacentHTML