HTML DOM Element insertAdjacentHTML() 方法

定义和用法

insertAdjacentHTML() 方法将 HTML 代码插入到指定位置。

合法的位置：

值 描述
afterbegin 在元素开始之后（第一个子元素）。
afterend 元素后。
beforebegin 元素前。
beforeend 在元素结束之前（最后一个子元素）。

实例

例子 1

在 header 元素之后插入一个新的 <p> 元素：

const h2 = document.getElementById("myH2");
let html = "<p>My new paragraph.</p>";
h2.insertAdjacentHTML("afterend", html);

亲自试一试

例子 2

使用 "afterbegin"：

let html = "<span style='color:red'>My span</span>"; h2.insertAdjacentHTML("afterbegin", html);

亲自试一试

例子 3

使用 "beforebegin"：

h2.insertAdjacentHTML("beforebegin", html);

亲自试一试

例子 4

使用 "beforeend"：

h2.insertAdjacentHTML("beforeend", html);

亲自试一试

语法

element.insertAdjacentHTML(position, html)

或

node.insertAdjacentHTML(position, html)

参数

参数 描述
position

必需。相对于元素的位置：

  • afterbegin
  • afterend
  • beforebegin
  • beforeend
html 要插入的 HTML。

浏览器支持

所有浏览器都支持 element.insertAjacentHTML()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 支持 支持 支持 支持 支持