insertAdjacentElementメソッド
メソッド insertAdjacentElement は、
要素をページの任意の場所に挿入することを可能にします。
多くの場合、createElement を使用して要素を作成した後に使用されます。
コードは基準要素を基準にして挿入されます。
基準要素の前に挿入（挿入方法 beforeBegin）、
後に挿入（挿入方法 afterEnd）、
また、基準要素の先頭（挿入方法 afterBegin）
または末尾（挿入方法 beforeEnd）に挿入することができます。
構文
基準要素.insertAdjacentElement(挿入方法, 挿入するコード);
例 . 方法 beforeBegin
基準要素を #target 要素とします。
その前に新しい段落を挿入しましょう：
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
コード実行結果：
<p>!</p>
<div id="target">
<p>elem</p>
</div>
例 . 方法 afterEnd
では、新しい段落を基準要素の後に挿入しましょう：
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
コード実行結果：
<div id="target">
<p>elem</p>
</div>
<p>!</p>
例 . 方法 afterBegin
新しい段落を基準要素の先頭に挿入しましょう：
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
コード実行結果：
<div id="target">
<p>!</p>
<p>elem</p>
</div>
例 . 方法 beforeEnd
新しい段落を基準要素の末尾に挿入しましょう：
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
コード実行結果：
<div id="target">
<p>elem</p>
<p>!</p>
</div>
関連項目
-
メソッド
insertAdjacentHTML,
指定された場所にHTMLタグを挿入する -
メソッド
insertAdjacentText,
指定された場所にテキストを挿入する -
メソッド
prepend,
要素の先頭に要素を挿入する -
メソッド
append,
要素の末尾に要素を挿入する -
メソッド
appendChild,
親要素の末尾に要素を挿入する -
メソッド
insertBefore,
要素の前に要素を挿入する
