Element: insertAdjacentElement() メソッド
insertAdjacentElement()
は Element
インターフェイスのメソッドで、呼び出された要素から相対的に指定された位置に、指定された要素ノードを挿入します。
構文
js
insertAdjacentElement(position, 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 before と Insert after ボタンを押すと、 insertAdjacentElement()
を使って選択された要素の前後に新しい div を挿入することができます。
仕様書
Specification |
---|
DOM Standard # dom-element-insertadjacentelement |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
Element.insertAdjacentHTML()
Element.insertAdjacentText()
Node.insertBefore()
(beforebegin
と同様で、異なる引数)Node.appendChild()
(beforeend
と同様の効果)