element.insertAdjacentHTML

insertAdjacentHTML() 方法将指定的文本解析为 Element 元素,并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素,因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤,使其比直接使用innerHTML操作更快。

语法

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

规范

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

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
insertAdjacentHTMLChrome Full support 1Edge Full support 17
Full support 17
No support 12 — 17
Notes
Notes This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Firefox Full support 8IE Full support 4
Notes
Full support 4
Notes
Notes Before Internet Explorer 10, throws an "Invalid target element for this operation." error when called on a <table>, <tbody>, <thead>, or <tr> element.
Notes This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Opera Full support 8Safari Full support 4WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 8Opera Android Full support 10.1Safari iOS Full support 4Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

相关链接