概述

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) ? ?

?

 

 

相关链接

文档标签和贡献者

 最后编辑者: OlafCheng,