insertAdjacentElementメソッド

メソッド insertAdjacentElement は、 要素をページの任意の場所に挿入することを可能にします。 多くの場合、createElement を使用して要素を作成した後に使用されます。 コードは基準要素を基準にして挿入されます。 基準要素の前に挿入（挿入方法 beforeBegin）、 後に挿入（挿入方法 afterEnd）、 また、基準要素の先頭（挿入方法 afterBegin） または末尾（挿入方法 beforeEnd）に挿入することができます。

構文

javascript基準要素.insertAdjacentElement(挿入方法, 挿入するコード);

例 . 方法 beforeBegin

基準要素を #target 要素とします。 その前に新しい段落を挿入しましょう：

html<div id="target">
  <p>elem</p>
</div>

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);

コード実行結果：

html<p>!</p>
<div id="target">
  <p>elem</p>
</div>

例 . 方法 afterEnd

では、新しい段落を基準要素の後に挿入しましょう：

html<div id="target">
  <p>elem</p>
</div>

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);

コード実行結果：

html<div id="target">
  <p>elem</p>
</div>
<p>!</p>

例 . 方法 afterBegin

新しい段落を基準要素の先頭に挿入しましょう：

html<div id="target">
  <p>elem</p>
</div>

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);

コード実行結果：

html<div id="target">
  <p>!</p>
  <p>elem</p>
</div>

例 . 方法 beforeEnd

新しい段落を基準要素の末尾に挿入しましょう：

html<div id="target">
  <p>elem</p>
</div>

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);

コード実行結果：

html<div id="target">
  <p>elem</p>
  <p>!</p>
</div>

関連項目