博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
冷门Javascript API——element.insertAdjacentHTML
阅读量:6407 次
发布时间:2019-06-23

本文共 1294 字,大约阅读时间需要 4 分钟。

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更好的性能:

这可能是比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",    "

Hello world!

");

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

 

总结 

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

 

参考资料

 . John Resig

 . MDN

 

转载地址:http://qzqea.baihongyu.com/

你可能感兴趣的文章
一起谈.NET技术,晚绑定场景下对象属性赋值和取值可以不需要PropertyInfo
查看>>
一起谈.NET技术,.Net Framework源代码中的模式之Prototype(原型模式)
查看>>
[shell 命令] find 查找文件
查看>>
windows下启动mysql服务的命令行启动和手动启动方法
查看>>
VTK三维点集轮廓凸包提取
查看>>
【概率论与数理统计】小结9-3 - 区间估计
查看>>
Golang性能调优入门
查看>>
sqlloader外部表
查看>>
golang笔记——数组与切片
查看>>
屏蔽可忽略的js脚本错误
查看>>
散文分享
查看>>
【Vue】vue.js常用指令
查看>>
NFS学习
查看>>
MySql常用命令总结
查看>>
又一年...
查看>>
文件上传框的美化+预览+ajax
查看>>
Linux VFS
查看>>
ext不能选中复制属性_如何实现Extjs的grid单元格只让选择(即可以复制单元格内容)但是不让修改?...
查看>>
python中print的作用*8、不能+8_在 Python 3.x 中语句 print(*[1,2,3]) 不能正确执行。 (1.0分)_学小易找答案...
查看>>
python 生成html代码_使用Python Markdown 生成 html
查看>>