JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.insertAdjacentHTMLで指定位置にHTMLを挿入 [直感的に挿入位置が分かるサンプル付]

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.insertAdjacentHTML

JavaScriptの.insertAdjacentHTMLで指定位置にHTMLを挿入 [直感的に挿入位置が分かるサンプル付]

JavaScriptの.insertAdjacentHTMLで指定位置にHTMLを挿入 [直感的に挿入位置が分かるサンプル付]

JavaScriptの.insertAdjacentHTML は、指定した位置にHTMLを追加するメソッドです。

この記事ではそんな.insertAdjacentHTML についての内容です。

かかかず
かかかず

直感的に挿入位置が分かるサンプルは、記事後半にあります。イメージ造り用に併せてご覧ください。

多少解説色の強い記事ですが、最後までご覧ください。

.insertAdjacentHTML

JavaScriptの .insertAdjacentHTML は、指定したHTML指定した位置に挿入します。

element.insertAdjacentHTML('挿入する位置', '挿入するHTML');

第一引数(括弧内の前)では「挿入する位置」を指定し、第二引数で「挿入するHTML」を指定します。

第一引数の「挿入する位置」に指定できるのは、以下の4種類です。

  • beforebegin … 指定した要素のタグの上に挿入
  • afterbegin … 指定した要素のタグの中の初めに挿入
  • beforeend … 指定した要素のタグの中の最後に挿入
  • afterend … 指定した要素のタグの下に挿入

.insertAdjacentHTMLで挿入される位置

手順と方法

挿入する位置は、微妙にそれぞれ異なるので一個一個コードを交えて見ていきましょう。

beforebegin … 指定した要素のタグの上に挿入

beforebeginは、指定した要素のタグの上に挿入します。

例えば、「baseObject」というidを持つ要素を指定して、beforebegin で新しい要素を挿入すると、配置される場所は以下のようになります。

<ul>
<!-- ▼beforebeginで追加の要素▼ -->
<li class="plusObject">beforebegin</li>
<!-- ▲beforebeginで追加の要素▲ -->
<li id="baseObject">指定した要素のタグ</li>
</ul>

<script>
var x = document.getElementById('baseObject');
x.insertAdjacentHTML('beforebegin', '<li class="plusObject">beforebegin</li>');
</script>

このように、指定した要素の上に挿入されます。

afterbegin … 指定した要素のタグの中の初めに挿入

afterbeginは、指定した要素のタグの中の初めに挿入します。

かかかず
かかかず

文字通り、タグの中です。

配置される場所は以下のようになります。

<ul>
<li id="baseObject"><!-- タグの中の初めに挿入した要素 ▶︎--><span>afterbegin</span><!-- ◀︎タグの中の初めに挿入した要素 -->指定した要素のタグ</li>
</ul>

<script>
var x = document.getElementById('baseObject');
x.insertAdjacentHTML('afterbegin', '<span>afterbegin</span>');
</script>

beforeend … 指定した要素のタグの中の最後に挿入

beforeendは、指定した要素のタグの中の最後に挿入されます。

<ul>
<li id="baseObject">指定した要素のタグ<!-- タグの中の後に挿入した要素 ▶︎--><span>beforeend</span><!-- ◀︎タグの中の後に挿入した要素 --></li>
</ul>

<script>
var x = document.getElementById('baseObject');
x.insertAdjacentHTML('beforeend', '<span>beforeend</span>');
</script>
かかかず
かかかず

beforeend もタグの中に挿入します。

afterend … 指定した要素のタグの下に挿入

afterendは、指定した要素のタグの下に挿入します。ちょうど、指定した要素のタグの上に挿入するbeforebegin と挿入位置が逆です。

<ul>
<li id="baseObject">指定した要素のタグ</li>
<!-- ▼afterendで追加の要素▼ -->
<li class="plusObject">afterend</li>
<!-- ▲afterendで追加の要素▲ -->
</ul>

<script>
var x = document.getElementById('baseObject');
x.insertAdjacentHTML('afterend', '<li class="plusObject">afterend</li>');
</script>

このように、指定した要素の下に挿入されます。

要素を指定位置に追加するサンプル

これまで解説してきた「挿入する位置」が分かりやすいよう、.insertAdjacentHTML を使ったサンプルを作ってみました。

ちなみにサンプルのHTMLの構造は、以下のようにシンプルな構造になっています。

<ul>
<li id="baseObject">指定した要素のタグ</li>
</ul>
かかかず
かかかず

言葉での「挿入位置」よりも、直感的にイメージできるよう作ったサンプルです。

挿入位置が記載されたボタンをクリックすることで、「指定した要素のタグ」をベースにしてその位置に要素が挿入されます。

  • 指定した要素のタグ

さいごに

先生

.insertAdjacentHTML は、便利なメソッドです。

指定する挿入位置の4種類は、似たような名称なので紛らわしい部分もありますが、是非この記事を参考にして、使いこなしてみてください。