insertAdjacentHTMLメソッド

メソッドinsertAdjacentHTMLは、 任意の場所にHTMLコードの文字列をページに挿入することを可能にします。 コードは基準要素を基準に挿入されます。 基準要素の前に挿入する（挿入方法'beforeBegin'）、 後に挿入する（挿入方法'afterEnd'）、 または基準要素の先頭に（挿入方法'afterBegin'）、 末尾に（挿入方法'beforeEnd'）挿入することができます。

構文

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

例 . beforeBegin メソッド

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

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('beforeBegin', '<p>!</p>');

コード実行の結果：

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

例 . afterEnd メソッド

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

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('afterEnd', '<p>!</p>');

コード実行の結果：

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

例 . afterBegin メソッド

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

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('afterBegin', '<p>!</p>');

コード実行の結果：

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

例 . beforeEnd メソッド

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

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('beforeEnd', '<p>!</p>');

コード実行の結果：

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

関連項目