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