element.insertAdjacentHTML
insertAdjacentHTML()
方法将指定的文本解析为 Element
元素,并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素,因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤,使其比直接使用innerHTML操作更快。
语法
位置名称的可视化
<!--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解释器的转换,性能会好一点。
规范
Specification | Status | Comment |
---|---|---|
DOM Parsing and Serialization Element.insertAdjacentHTML() |
Working Draft |
浏览器兼容性
BCD tables only load in the browser
相关链接
- 包括Henri Sivonen 在内的某些 hacks.mozilla.org 客座文章 显示,
insertAdjacentHTML
在某些情况下可以更快。 Element.insertAdjacentElement()
Element.insertAdjacentText()