![JavaScriptの.insertAdjacentHTMLで指定位置にHTMLを挿入 [直感的に挿入位置が分かるサンプル付]](https://dubdesign.net/wp-content/uploads/2022/04/plusinnerhtml.svg)
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種類は、似たような名称なので紛らわしい部分もありますが、是非この記事を参考にして、使いこなしてみてください。
