概述
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元素时工作.
示例
document.all.paral.insertAdjacentHTML("afterBegin","<h1>在文本前容器内插入内容</h1>");
document.all.paral.insertAdjacentHTML("beforeEnd","<h2>在文本后容器内插入内容</h2>");
document.all.paral.insertAdjacentHTML("beforeBegin","<h4>在文本前容器外插入内容</h1>");
document.all.paral.insertAdjacentHTML("afterEnd","<h5>在文本后容器外插入内容</h2>");
使用insertAdjacentHTML
插入用户输入的HTML内容的时候, 需要转义之后才能使用.
如果只是为了插入文本内容(而不是HTML节点), 不建议使用这个方法, 建议使用node.textContent
或者 node.insertAdjacentText()
. 因为这样不需要经过HTML解释器的转换, 性能会好一点.