JavaScriptでHTMLコードを要素として挿入したい時に便利なinsertAdjacentHTML()メソッドの使い方

HTMLコードを要素として挿入するinsertAdjacentHTML()

JavaScriptでHTMLコードを要素として挿入するにはinsertAdjacentHTML()メソッドを利用します。

このメソッドは親要素を指定して挿入するため、親要素の取得が必要です。

メソッド

メソッド意味返り値
【親要素】.insertAdjacentHTML(挿入位置, 文字列)文字列をHTMLとして挿入要素(Element)
insertAdjacentHTML()メソッド

挿入位置一覧

挿入位置意味
‘beforebegin’親要素の直前
‘afterbegin’親要素内の先頭
‘beforeEnd’親要素内の末尾
‘afterEnd’親要素の直後

サンプルコード

サンプルコードとして、親要素を指定して、オプションとしてある4つの挿入位置それぞれに対して1行のコードを挿入するスクリプトを紹介します。

Output
【insertAdjacentHTML()を使って要素を追加】
親要素
子要素1
子要素2
子要素3
Pug
#targetArea 【insertAdjacentHTML()を使って要素を追加】
		#targetParent 親要素
			.targetChild 子要素1
			.targetChild 子要素2
			.targetChild 子要素3
JavaScript
const targetParent = document.getElementById('targetParent');

//'beforebegin'
targetParent.insertAdjacentHTML('beforeBegin', `<div>'beforebegin'指定で追加</div>`);
//'afterbegin'
targetParent.insertAdjacentHTML('afterbegin', `<div>'afterbegin'指定で追加</div>`);
//'beforeend'
targetParent.insertAdjacentHTML('beforeend', `<div>'beforeend'指定で追加</div>`);
//'afterend'
targetParent.insertAdjacentHTML('afterend', `<div>'afterend'指定で追加</div>`);
インストラクター
コメント

コメントを残す