JavaScriptで親要素の末尾に要素を追加するのに便利な.appendChild()メソッドの使い方

親要素の末尾に要素を追加する.appendChild()メソッド

JavaScriptで親要素の末尾に要素を追加するには、appendChild()メソッドを利用します。

メソッド

メソッド意味返り値
【特定要素】.appendChild(子要素)特定要素(親要素)の末尾に子要素を追加要素(Element)
appendChild()

サンプルコード

サンプルコードとして、【特定要素】の末尾に要素を1列追加するスクリプトを紹介します。

Output
【親要素の末尾に要素を追加】
親要素
子要素1
子要素2
子要素3
Pug
#targetArea 【親要素の末尾に要素を追加】
		#targetParent 親要素
			.targetChild 子要素1
			.targetChild 子要素2
			.targetChild 子要素3
JavaScript
const targetParent = document.getElementById('targetParent');
//divタグを作成して末尾に追加
 const additionalElement = document.createElement("div");
additionalElement.textContent = '子要素4(追加された子要素)';
targetParent.appendChild(additionalElement);
インストラクター
コメント

コメントを残す