Element: insertAdjacentElement() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

insertAdjacentElement()Element インターフェイスのメソッドで、呼び出された要素から相対的に指定された位置に、指定された要素ノードを挿入します。

構文

js
insertAdjacentElement(position, element)

引数

position

文字列で、 targetElement の相対位置を表します。以下の何れかの文字列と一致する必要があります(大文字小文字の区別なし)。

  • 'beforebegin': targetElement 自体の前。
  • 'afterbegin': targetElement の直下、最初の子の前。
  • 'beforeend': targetElement の直下、最後の子の後。
  • 'afterend': targetElement 自体の後。
element

ツリーに挿入する要素です。

返値

挿入された要素です。挿入に失敗した場合は null になります。

例外

  • SyntaxError DOMException
    • 指定された position が理解できない値であった場合に発生します。
  • TypeError
    • 指定された element が有効な要素でなかった場合に発生します。

position の名前の視覚化

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

メモ: beforebegin および afterend の位置は、そのノードがツリー内にあり、親が要素である場合のみ動作します。

js
beforeBtn.addEventListener("click", () => {
  const tempDiv = document.createElement("div");
  tempDiv.style.backgroundColor = randomColor();
  if (activeElem) {
    activeElem.insertAdjacentElement("beforebegin", tempDiv);
  }
  setListener(tempDiv);
});

afterBtn.addEventListener("click", () => {
  const tempDiv = document.createElement("div");
  tempDiv.style.backgroundColor = randomColor();
  if (activeElem) {
    activeElem.insertAdjacentElement("afterend", tempDiv);
  }
  setListener(tempDiv);
});

insertAdjacentElement.html のデモを GitHub で見てください(ソースコードも見てください)。ここでは、コンテナーの中に <div> 要素が並んでいます。そして、Insert beforeInsert after ボタンを押すと、 insertAdjacentElement() を使って選択された要素の前後に新しい div を挿入することができます。

仕様書

Specification
DOM
# dom-element-insertadjacentelement

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
insertAdjacentElement

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

関連情報