当前位置：文江博客知识库简体中文文档 Web API Element insertAdjacentElement

Element.insertAdjacentElement() - Web API 接口参考编辑

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

语法

element.insertAdjacentElement(position, element);

参数

position

A DOMString 表示相对于该元素的位置；必须是以下字符串之一：

'beforebegin': 在该元素本身的前面.
'afterbegin':只在该元素当中, 在该元素第一个子孩子前面.
'beforeend':只在该元素当中, 在该元素最后一个子孩子后面.
'afterend': 在该元素本身的后面.

element

要插入到树中的元素.

异常

异常	说明
`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!