0
点赞
收藏
分享

微信扫一扫

javascript DOM操作中的insertAdjacentHTML方法

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

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

MDN上查了一下兼容性:​​https://developer.mozilla.org/en-US/docs/Web/API/element.insertAdjacentHTML​​

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,);

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

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

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

性能测试可以看这里:​​http://jsperf.com/innerhtml-vs-insertadjacenthtml-vs-dom/8​​


 



举报

相关推荐

0 条评论