HTML DOM Element insertAdjacentElement() 方法

定义和用法

insertAdjacentElement() 方法将元素插入到指定位置。

合法的位置:

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

实例

例子 1

在标题后插入一个 span 元素:

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("afterend", span);

亲自试一试

例子 2

使用 "afterbegin":

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("afterbegin", span);

亲自试一试

例子 3

使用 "beforebegin":

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("beforebegin", span);

亲自试一试

例子 4

使用 "beforeend":

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("beforeend", span);

亲自试一试

语法

element.insertAdjacentElement(position, element)

node.insertAdjacentElement(position, element)

参数

参数描述
position

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

  • afterbegin

  • afterend

  • beforebegin

  • beforeend

element要插入的元素。

浏览器支持

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

ChromeIEEdgeFirefoxSafariOpera
ChromeIEEdgeFirefoxSafariOpera
支持支持支持支持支持支持