元素：insertAdjacentHTML() 方法

insertAdjacentHTML() 是 Element 接口的一个方法，它将指定的文本解析为 HTML 或 XML，并将生成的节点插入 DOM 树的指定位置。

语法

js
insertAdjacentHTML(position, text)

参数

position

表示相对于元素的位置的字符串。必须是以下字符串之一

"beforebegin"

在元素之前。仅当元素位于 DOM 树中且具有父元素时才有效。

"afterbegin"

在元素内部，其第一个子元素之前。

"beforeend"

在元素内部，其最后一个子元素之后。

"afterend"

在元素之后。仅当元素位于 DOM 树中且具有父元素时才有效。

text

要作为 HTML 或 XML 解析并插入树中的字符串。

返回值

无 (undefined).

异常

此方法可能会引发以下类型之一的 DOMException

NoModificationAllowedError DOMException

如果 position 为 "beforebegin" 或 "afterend" 并且元素没有父元素或其父元素为 Document 对象，则抛出此异常。

SyntaxError DOMException

如果 position 不是四个列出值之一，则抛出此异常。

描述

insertAdjacentHTML() 方法不会重新解析其正在使用的元素，因此不会损坏该元素内部的现有元素。这避免了序列化的额外步骤，使其比直接 innerHTML 操作快得多。

我们可以将插入内容的可能位置可视化如下

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

安全注意事项

使用 insertAdjacentHTML() 将 HTML 插入页面时，请注意不要使用未转义的用户输入。

插入纯文本时不应使用 insertAdjacentHTML()。相反，请使用 Node.textContent 属性或 Element.insertAdjacentText() 方法。这不会将传递的内容解释为 HTML，而是将其插入为原始文本。

示例

插入 HTML

HTML

html
<select id="position">
  <option>beforebegin</option>
  <option>afterbegin</option>
  <option>beforeend</option>
  <option>afterend</option>
</select>

<button id="insert">Insert HTML</button>
<button id="reset">Reset</button>

<p>
  Some text, with a <code id="subject">code-formatted element</code> inside it.
</p>

CSS

css
code {
  color: red;
}

JavaScript

js
const insert = document.querySelector("#insert");
insert.addEventListener("click", () => {
  const subject = document.querySelector("#subject");
  const positionSelect = document.querySelector("#position");
  subject.insertAdjacentHTML(
    positionSelect.value,
    "<strong>inserted text</strong>",
  );
});

const reset = document.querySelector("#reset");
reset.addEventListener("click", () => {
  document.location.reload();
});

结果

规范

规范
HTML 标准
# the-insertadjacenthtml()-method

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅