HTML DOM Element insertAdjacentElement() メソッド

定義と使用法

insertAdjacentElement() 指定された位置に要素を挿入するメソッド。

合法な位置：

値 説明
afterbegin 要素の始めの後に（最初の子要素）。
afterend 要素の後に。
beforebegin 要素の前に。
beforeend 要素の終わりの前に（最後の子要素）。

例

例1

span要素をタイトルの後ろに挿入：

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("afterend", span);

自分で試してみてください

例2

"afterbegin"を使用：

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("afterbegin", span);

自分で試してみてください

例3

"beforebegin"を使用：

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("beforebegin", span);

自分で試してみてください

例4

"beforeend"を使用：

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("beforeend", span);

自分で試してみてください

文法

element.insertAdjacentElement(position, element)

または

node.insertAdjacentElement(position, element)

パラメータ

パラメータ 説明
position

必須。要素に対する位置：

  • afterbegin
  • afterend
  • beforebegin
  • beforeend
element 挿入する要素。

ブラウザサポート

すべてのブラウザがサポートしています element.insertAdjacentElement()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
サポート サポート サポート サポート サポート サポート