element.insertAdjacentHTML

概述

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

示例

// <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解释器的转换, 性能会好一点.

规范

浏览器兼容性

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!

相关链接

• hacks.mozilla.org guest post by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.
• Element.insertAdjacentElement()
• Element.insertAdjacentText()