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

2023-02-04JavaScript DOM操作,JavaScript

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

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

正確には子要素の前後ではなく、指定したHTML要素の開始タグの直後、または終了タグの直前にHTML要素を挿入します。

子要素の手前(先頭)にHTMLを追加する

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

See the Pen JavaScript | Replace HTML by yochans (@yochans) on CodePen.

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

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

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

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

正確な機能説明は指定したHTML要素の開始タグの直後に追加、になります。

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

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

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

子要素の後(末尾)に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要素を追加する事が可能です。

子要素のafterbeginに追加する場合は第一引数に「beforeend」を指定します。

正確な処理内容ですと、指定したHTML要素の終了タグの直前に追加、という事になります。

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

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

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