Element.insertAdjacentHTML()

在此页

句法
范例
注意事项
规范
浏览器兼容性
另请参阅
相关话题

insertAdjacentHTML() 方法在 元素 interface parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position. It does not reparse the element it is being used on, and thus it does not corrupt the existing elements inside that element. This avoids the extra step of serialization, making it much faster than direct innerHTML manipulation.

句法

element.insertAdjacentHTML(position, text);

参数

位置


									DOMString

representing the position relative to the


								element

; must be one of the following strings:

'beforebegin' : Before the element 本身。
'afterbegin' : Just inside the element , before its first child.
'beforeend' : Just inside the element , after its last child.
'afterend' : After the element 本身。

text

The string to be parsed as HTML or XML and inserted into the tree.

Visualization of position names

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

注意：


							beforebegin

and


							afterend

positions work only if the node is in the DOM tree and has a parent element.

范例

// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>

注意事项

安全注意事项

When inserting HTML into a page by using insertAdjacentHTML() , be careful not to use user input that hasn't been escaped.

It is not recommended you use insertAdjacentHTML() when inserting plain text; instead, use the Node.textContent 特性或 Element.insertAdjacentText() method. This doesn't interpret the passed content as HTML, but instead inserts it as raw text.

规范

规范	状态	注释
DOM 剖析和序列化 The definition of 'Element.insertAdjacentHTML()' in that specification.	工作草案

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`insertAdjacentHTML`	Chrome 1	Edge 18 18 不支持 12 — 18 This function is implemented in the `HTMLElement` API, meaning non-HTML elements (like SVG elements) cannot use this function.	Firefox 8	IE 4 4 Before Internet Explorer 10, throws an "Invalid target element for this operation." error when called on a `<table>` , `<tbody>` , `<thead>` ，或 `<tr>` 元素。 This function is implemented in the `HTMLElement` API, meaning non-HTML elements (like SVG elements) cannot use this function.	Opera 8	Safari 10	WebView Android 1	Chrome Android 18	Firefox Android 8	Opera Android 10.1	Safari iOS 4	Samsung Internet Android 1.0

图例

完整支持

另请参阅

Element.insertAdjacentElement()
Element.insertAdjacentText()
XMLSerializer ：构造 XML 文本的 DOM 表示
hacks.mozilla.org guest post by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.

元数据

最后修改： Nov 8, 2019

在此页

句法

参数

Visualization of position names

范例

注意事项

安全注意事项

规范

浏览器兼容性

图例

另请参阅

相关话题