插入HTML内容与文本内容以前用的是innerHTML与innerText方法,今天看到insertAdjacentHTML和 insertAdjacentText两个API,特地学习一下:

insertAdjacentHTML和 insertAdjacentText这两个方法很灵活,可以在指定的地方插入html内容和文本内容,在大部分情况下比element.innerHTML的性能更好,比Document Fragments更好的HTML文档插入方案,因为我们知道Document Fragments在某些IE版本中的表现不好。
insertAdjacentText方法与 insertAdjacentHTML方法类似,只不过只能插入纯文本,参数相同。

MDN上查了一下兼容性:IT虾米网

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

接口也很简单:

js 代码:
  1. element.insertAdjacentHTML(position, text);

需要传入字符串参数position,以及字符串参数html代码。我们可以对照jQuery的HTML插入方法。
参数position 的取值:

  • beforeBegin:在该元素前插入
  • afterBegin:在该元素第一个子元素前插入
  • beforeEnd:在该元素最后一个子元素后面插入
  • afterEnd:在该元素后插入

方法同意支持空元素,和innerHTML与innerText方法没什么区别了。

性能测试可以看这里:IT虾米网


发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

ul ol li的序号编号样式知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。