JavaScript | 要素の前後にHTMLを追加する方法

2022-02-14JavaScript DOM操作,JavaScript

JavaScriptinsertAdjacentHTML()を利用して、指定したHTML要素の前や後（上や下）にHTMLを追加する方法を紹介しています。

要素の手前（上）にHTMLを追加する

JavaScriptのinsertAdjacentHTML()使って指定した要素の手前、上にHTMLタグを追加する動作サンプルとサンプルコードです。

See the Pen JavaScript | Add HTML before child elements by yochans (@yochans) on CodePen.

サンプルコードではHTMLに「.container」とid名を指定した<div>タグを設置しています。

<div id="container"><p>PHP</p></div>

insertAdjacentHTML()は指定した要素内や要素の前後にHTML要素を追加する事が可能です。

要素の前（上）に追加する場合は第一引数に「beforebegin」を指定します。

「beforebegin」を指定した場合、HTML要素の開始タグの前に第二引数に指定した値を追加します。

document.querySelector('#container').insertAdjacentHTML('beforebegin', '<p>JavaScript</p>');

追加後のHTMLは以下のようになります。

<p>JavaScript</p>
<div id="container"></div>

要素の後（下）にHTMLを追加する

JavaScriptのinsertAdjacentHTML()使って指定した要素の後ろ・下にHTMLタグを追加する動作サンプルとサンプルコードです。

See the Pen JavaScript | Add HTML before elements by yochans (@yochans) on CodePen.

サンプルコードではHTMLに「.container」とid名を指定した<div>タグを設置しています。

<div id="container"></div>

insertAdjacentHTML()は指定した要素内や要素の前後にHTML要素を追加する事が可能です。

子要素の手前（先頭）に追加する場合は第一引数に「afterend」を指定します。

「afterend」を指定した場合、HTML要素の終了タグの直後に第二引数に指定した値を追加します。

document.querySelector('#container').insertAdjacentHTML('afterend', '<p>JavaScript</p>');

追加後のHTMLは以下のようになります。

<div id="container"></div>
<p>JavaScript</p>