插入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 代码:
- element.insertAdjacentHTML(position, text);
需要传入字符串参数position，以及字符串参数html代码。我们可以对照jQuery的HTML插入方法。
参数position 的取值：
- beforeBegin：在该元素前插入
- afterBegin：在该元素第一个子元素前插入
- beforeEnd：在该元素最后一个子元素后面插入
- afterEnd：在该元素后插入
方法同意支持空元素，和innerHTML与innerText方法没什么区别了。
性能测试可以看这里：http://jsperf.com/innerhtml-vs-insertadjacenthtml-vs-dom/8