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()
子要素の手前（先頭）に追加する場合は第一引数に「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()
子要素のafterbeginに追加する場合は第一引数に「beforeend」を指定します。
正確な処理内容ですと、指定したHTML要素の終了タグの直前に追加、という事になります。
document.querySelector('#container').insertAdjacentHTML('beforeend', '<p>JavaScript</p>');追加後のHTMLは以下のようになります。
<div id="container"><p>PHP</p><p>JavaScript</p></div>