冷门Javascript API——element.insertAdjacentHTML

John Resig（jQuery的作者）在2008年的时候曾经尝试将elment.insertAdjacentHTML引入jQuery，不过他最终放弃了。主要原因在于：

• 其在IE6中不支持向table，tbody，thead或者tr插入html，否则会抛出错误。
• 不支持XML文档。

不过当时，这一由IE4.0开始出现的接口已经进入了HTML5的接口名单，将会有更多浏览器实现该接口，下面便是目前桌面浏览器的支持情况：

 

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

 

但是，我们为什么会关注这一接口呢？

 

比element.innerHTML更好的性能

测试结果表明，element.insertAdjacentHTML在大部分情况下有比element.innerHTML更好的性能：

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

这可能是比Document Fragments更好的HTML文档插入方案，因为我们知道Document Fragments在某些IE版本中的表现比较糟糕（看来IE的实现方式和别的都不太一样啊……）。

这给我们得模板优化提供了可行而简易的方案。

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

 

在指定位置插入HTML

element.insertAdjancentHTML(position, html)

需要传入字符串参数position，以及字符串参数html代码。我们可以对照jQuery的HTML插入方法，得到这一position的对照关系：

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

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

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

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

即：

beforeBegin：在该元素前插入

afterBegin：在该元素第一个子元素前插入

beforeEnd：在该元素最后一个子元素后面插入

afterEnd：在该元素后插入

 不过，当元素是空的时候，其和innerHTML就可以很相像了，比如：

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

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

 

总结 

主要还是看需求。由于我们的项目可以不考虑IE6，所以IE6的问题就不是问题了。而且模板引擎不会插入XML Document，所以第二个问题也不是问题了。

 

参考资料

DOM insertAdjacentHTML . John Resig

element.insertAdjacentHTML . MDN