HTML DOM 元素 insertAdjacentElement()
示例
在标题后插入一个 span 元素
const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("afterend", span);
自己试试 »
更多示例见下。
描述
该 insertAdjacentElement()
方法将元素插入到指定位置。
合法位置
值 | 描述 |
---|---|
afterbegin | 在元素的开头之后(第一个子元素) |
afterend | 在元素之后 |
beforebegin | 在元素之前 |
beforeend | 在元素的结尾之前(最后一个子元素) |
语法
element.insertAdjacentElement(position, element)
或
node.insertAdjacentElement(position, element)
参数
参数 | 描述 |
position | 必填。 相对于元素的位置 afterbegin afterend beforebegin beforeend |
element | 要插入的元素。 |
更多示例
示例
使用 "afterbegin"
const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("afterbegin", span);
自己试试 »
示例
使用 "beforebegin"
const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("beforebegin", span);
自己试试 »
示例
使用 "beforeend"
const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("beforeend", span);
自己试试 »
浏览器支持
element.insertAjacentElement()
在所有浏览器中均受支持
Chrome | Edge | Firefox | Safari | Opera | IE |
是 | 是 | 是 | 是 | 是 | 是 |