冷门Javascript API——element.insertAdjacentHTML
2013-06-07 23:43
429 查看
John Resig(jQuery的作者)在2008年的时候曾经尝试将elment.insertAdjacentHTML引入jQuery,不过他最终放弃了。主要原因在于:
其在IE6中不支持向table,tbody,thead或者tr插入html,否则会抛出错误。
不支持XML文档。
不过当时,这一由IE4.0开始出现的接口已经进入了HTML5的接口名单,将会有更多浏览器实现该接口,下面便是目前桌面浏览器的支持情况:
但是,我们为什么会关注这一接口呢?
http://jsperf.com/insertadjacenthtml-perf/4
这可能是比Document Fragments更好的HTML文档插入方案,因为我们知道Document Fragments在某些IE版本中的表现比较糟糕(看来IE的实现方式和别的都不太一样啊……)。
这给我们得模板优化提供了可行而简易的方案。
好吧,那element.insertAdjacentHTML这接口怎么用呢?
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就可以很相像了,比如:
这里就和menu.innerHTML('<p>Hello world!</p>')是一样的。
[b]总结 [/b]
主要还是看需求。由于我们的项目可以不考虑IE6,所以IE6的问题就不是问题了。而且模板引擎不会插入XML Document,所以第二个问题也不是问题了。
element.insertAdjacentHTML . MDN
其在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) |
但是,我们为什么会关注这一接口呢?
[b]比element.innerHTML更好的性能[/b]
测试结果表明,element.insertAdjacentHTML在大部分情况下有比element.innerHTML更好的性能:http://jsperf.com/insertadjacenthtml-perf/4
这可能是比Document Fragments更好的HTML文档插入方案,因为我们知道Document Fragments在某些IE版本中的表现比较糟糕(看来IE的实现方式和别的都不太一样啊……)。
这给我们得模板优化提供了可行而简易的方案。
好吧,那element.insertAdjacentHTML这接口怎么用呢?
[b]在指定位置插入HTML[/b]
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>')是一样的。
[b]总结 [/b]
主要还是看需求。由于我们的项目可以不考虑IE6,所以IE6的问题就不是问题了。而且模板引擎不会插入XML Document,所以第二个问题也不是问题了。
[b]参考资料[/b]
DOM insertAdjacentHTML . John Resigelement.insertAdjacentHTML . MDN
相关文章推荐
- 有关javascript:insertAdjacentHTML和javascript:insertAdjacentElement的用法
- 有关javascript:insertAdjacentHTML和javascript:insertAdjacentElement的用法
- 有关javascript:insertAdjacentHTML和javascript:insertAdjacentElement的用法
- 有关javascript:insertAdjacentHTML和javascript:insertAdjacentElement的用法
- document.getElementById("MyFile")和insertAdjacentHTML("beforeEnd", str)的含义和用法
- FF下支持IE特有的insertAdjacentElement以及insertAdjacentHTML
- innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
- insertAdjacentHTML/insertAdjacentElement/insertAdjacentText
- javaScript的insertAdjacentHTML()和insertAdjacentText()详解
- innertext , insertadjacentelement , insertadjacenthtml
- innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
- Element.insertAdjacentHTML(position, text)
- 【javascript基础】insertAdjacentHTML和insertAdjacentText方法
- insertAdjacentElement of JavaScript
- JS学习37:insertAdjacentHTML/insertAdjacentElement/insertAdjacentText
- object.insertAdjacentHTML 如何使用?并附上多文件上传的例子
- JQuery html API支持解析执行Javascript脚本功能实现-代码分析
- 在某个地方插入HTML代码insertAdjacentHTML
- 在table中插入多行,能使用与insertAdjacentHTML相似的功能
- insertAdjacentHTML