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

JavaScript,javascript DOM操作

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>

JavaScript,javascript DOM操作

Posted by Yousuke.U