概述
insertAdjacentHTML() 将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接innerHTML操作更快。
语法
element.insertAdjacentHTML(position, text);
position是相对于元素的位置，并且必须是以下字符串之一：
- 'beforebegin'
- 元素自身的前面。
- 'afterbegin'
插入元素内部的第一个子节点之前。- 'beforeend'
- 插入元素内部的最后一个子节点之后。
- 'afterend'
- 元素自身的后面。
text是要被解析为HTML或XML,并插入到DOM树中的字符串。
位置名称的可视化：
<!--beforebegin--><p><!--afterbegin--> foo <!--beforeend--></p><!--afterend-->
注意： beforebegin和afterend位置,仅在节点在树中且节点具有一个parent元素时工作.
示例
// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
// 此时，新结构变成：
// <div id="one">one</div><div id="two">two</div>
规范
| Specification | Status | Comment |
|---|---|---|
| DOM Parsing and Serialization Element.insertAdjacentHTML() |
Working Draft |
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 1.0 | 8.0 (8.0) | 4.0 | 7.0 | 4.0 (527) |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | 8.0 (8.0) | ? | ? |
?
|
相关链接
- hacks.mozilla.org guest post by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.
Element.insertAdjacentElement()Element.insertAdjacentText()