概述

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>


// ES6 version

// let html = `<div id="two">two</div>`;
// div.insertAdjacentHTML(`beforeend`, html);


注意

安全问题

使用insertAdjacentHTML插入用户输入的HTML内容的时候, 需要转义之后才能使用.

如果只是为了插入文本内容(而不是HTML节点), 不建议使用这个方法, 建议使用node.textContent 或者 node.insertAdjacentText() . 因为这样不需要经过HTML解释器的转换, 性能会好一点.

规范

Specification Status Comment
DOM Parsing and Serialization
Element.insertAdjacentHTML()
Working Draft  

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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

?

 

 

相关链接

文档标签和贡献者

最后编辑者: maicss,