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
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ