JavaScriptで要素を動的に生成して追加するのに便利なdocument.createElement()メソッドの使い方

要素を動的に生成して追加するdocument.createElement()メソッド

JavaScriptで特定の要素を動的に生成して追加したい時はdocument.createElement()メソッドを利用します。

引数にタグを指定すると、そのタグ名の要素を作ることができます。

ただし、document.createElement()メソッドで生成しても画面上には何も変化はおきません。

appendChild()メソッドなどを使って、追加する必要があります。document.createElement()はあくまで生成しかしません。

また、innerHTMLプロパティーやtextContentプロパティーを使って中身のHTMLを追加したり、classListプロパティを使ってクラスを操作したりもできます。

メソッド

メソッド意味返り値
document.createElement(‘タグ名,オプション)タグ名の要素を生成する生成された要素
document.createElement()

サンプルコード

サンプルコードとして、「子要素4」と書かれた要素を生成して追加するスクリプトを紹介します。

また、実際のサンプルコードをご確認いただきたいのですが、「子要素4」には動的にクラスを追加するclassList.add()メソッドや属性を動的に追加するsetAttribute()メソッドも使っています。

これらは合わせてよく使いますので、覚えておくと良いでしょう。

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(追加された子要素)';
additionalElement.classList.add('targetChild');
additionalElement.setAttribute("id", "targetChild-4");
targetParent.appendChild(additionalElement);
インストラクター
コメント

コメントを残す