语法

element.insertAdjacentHTML(position, text);

position

一个 DOMString,表示插入内容相对于元素的位置,并且必须是以下字符串之一:
'beforebegin':元素自身的前面。
'afterbegin':插入元素内部的第一个子节点之前。
'beforeend':插入元素内部的最后一个子节点之后。
'afterend':元素自身的后面。

text

是要被解析为HTML或XML元素,并插入到 DOM 树中的 DOMString

位置名称的可视化

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

注意

安全问题

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

Last modification:May 15th, 2020 at 02:12 pm
如果觉得我的文章对你有用,请随意赞赏