Element.insertAdjacentElement()

在此页

句法
范例
规范
浏览器兼容性
另请参阅
相关话题

insertAdjacentElement() 方法在 元素 interface inserts a given element node at a given position relative to the element it is invoked upon.

句法

targetElement.insertAdjacentElement(position, element);

参数

位置


									DOMString

representing the position relative to the


								targetElement

; must match (case-insensitively) one of the following strings:

'beforebegin' : Before the targetElement 本身。
'afterbegin' : Just inside the targetElement , before its first child.
'beforeend' : Just inside the targetElement , after its last child.
'afterend' : After the targetElement 本身。

element

The element to be inserted into the tree.

返回值

The element that was inserted, or null , if the insertion failed.

异常

异常	解释
`SyntaxError`	`位置` specified is not a recognised value.
`TypeError`	`element` specified is not a valid element.

Visualization of position names

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

注意：


							beforebegin

and


							afterend

positions work only if the node is in a tree and has an element parent.

范例

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

Have a look at our insertAdjacentElement.html demo on Github (see the 源代码 too.) Here we have a sequence of <div> elements inside a container. When one is clicked, it becomes selected and you can then press the Insert before and Insert after buttons to insert new divs before or after the selected element using insertAdjacentElement() .

规范

规范	状态	注释
DOM The definition of 'insertAdjacentElement()' in that specification.	实时标准

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`insertAdjacentElement`	Chrome 1	Edge 18 18 不支持 12 — 18 This function is implemented in the `HTMLElement` API, meaning non-HTML elements (like SVG elements) cannot use this function.	Firefox 48	IE 8 8 This function is implemented in the `HTMLElement` API, meaning non-HTML elements (like SVG elements) cannot use this function.	Opera 8	Safari 10	WebView Android 1	Chrome Android 18	Firefox Android 48	Opera Android 10.1	Safari iOS 10	Samsung Internet Android 1.0

图例

完整支持

另请参阅

Element.insertAdjacentHTML()
Element.insertAdjacentText()
Node.insertBefore() (类似 beforebegin , with different arguments)
Node.appendChild() (same effect as beforeend )

元数据

最后修改： Aug 26, 2020

在此页

句法

参数

返回值

异常

Visualization of position names

范例

规范

浏览器兼容性

图例

另请参阅

相关话题