Element.insertAdjacentElement()

insertAdjacentElement() 方法将一个给定的元素节点插入到相对于被调用的元素的给定的一个位置。

语法

element.insertAdjacentElement(position, element);

参数

position
A DOMString 表示相对于该元素的位置;必须是以下字符串之一:
  • 'beforebegin': 在该元素本身的前面.
  • 'afterbegin':只在该元素当中, 在该元素第一个子孩子前面.
  • 'beforeend':只在该元素当中, 在该元素最后一个子孩子后面.
  • 'afterend': 在该元素本身的后面.
element
要插入到树中的元素.

返回值

插入的元素,插入失败则返回null.

异常

异常 说明
SyntaxError 插入的位置是一个无法识别的值。
TypeError 插入的元素不是一个有效元素。

位置命名的可视化展示

<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->
注: 当节点处于DOM树中而且有一个父元素的时候 beforebegin 和 afterend操作才能起作用。

例子

beforeBtn.addEventListener('click', function() {
  var tempDiv = document.createElement('div');
  tempDiv.style.backgroundColor = randomColor();
  activeElem.insertAdjacentElement('beforebegin',tempDiv);
  setListener(tempDiv);
});

afterBtn.addEventListener('click', function() {
  var tempDiv = document.createElement('div');
  tempDiv.style.backgroundColor = randomColor();
  activeElem.insertAdjacentElement('afterend',tempDiv);
  setListener(tempDiv);
});

看看我们在 Github (也可以参考 源码)上的 insertAdjacentElement.html 演示。在一个容器当中我们有一组<div> 元素。 点击其中一个div时,这个容器会处于选中状态,然后你就可以按下Insert before 或Insert after 按钮通过 insertAdjacentElement()方法来把一个新的divs 插入到选中的元素前面或者后面。

规范

规范 状态 批注
DOM
insertAdjacentElement()
Living Standard  

浏览器兼容

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes) 48.0 (48.0) 8 (Yes) (Yes)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 48.0 (48.0) ? ? ?

参见

文档标签和贡献者

 此页面的贡献者: xgqfrms-GitHub, maicss, Aolose
 最后编辑者: xgqfrms-GitHub,