JavaScriptで要素を生成・追加する

JavaScriptのcreateElement()で要素を生成してDOMに追加するということがよくあるので、個人的によくある要素追加パターンをいくつか紹介してみます。

divを生成する

divを生成して、classを追加してからDOMに追加してみます。
#wrapperにdivを追加します。

HTML

<div id="wrapper"></div>

追加するdivに適用するCSSを用意しておきます。

CSS

.sample {
	width: 100px;
	height: 100px;
	background: red;
}

JavaScriptでdivを生成して、DOMに追加します。

JavaScript

// div要素を生成
var div = document.createElement('div');
// classを追加
div.className = 'sample';

// 生成したdiv要素を追加する
document.getElementById('wrapper').appendChild(div);

divを追加することができました。
divを追加するデモページ
　

imgを生成する

次にimgを追加してみます。
HTMLは先ほどと同じなので省略します。

JavaScript

// img要素を生成
var img = document.createElement('img');
// 画像パスを追加
img.src = './image.jpg';
// altを追加
img.alt = '風景の画像です。';

// 生成したimg要素を追加する
document.getElementById('wrapper').appendChild(img);

imgを生成してから画像パスとaltを追加して、DOMに追加しています。
imgを追加するデモページ
　

videoを生成する

videoやaudioなども基本的には同じ形で追加できます。
今回はvideoを追加してみます。

JavaScript

// video要素を生成
var video = document.createElement('video');
// パスを追加
video.src = './movie.mp4';
// インターフェースを追加
video.controls = true;
// ループを設定
video.loop = true;

// 生成したvideo要素を追加する
document.getElementById('wrapper').appendChild(video);

videoのパスとインターフェース、ループを設定して追加しました。
videoを追加するデモページ
　

divとimgを生成して、div内にimgを追加する

次は形を少し変えて、divとimgを生成して、divの中にimgを追加してからDOMに追加してみます。

JavaScript

// div要素を生成
var div = document.createElement('div');
// classを追加
div.className = 'sample';

// img要素を生成
var img = document.createElement('img');
// 画像パスを追加
img.src = './image.jpg';
// altを追加
img.alt = 'ふうけい';

// img要素をdiv要素の子要素に追加
div.appendChild(img);

// 生成したdiv要素を追加する
document.getElementById('wrapper').appendChild(div);

divとimgの生成は前述のサンプルと同じで、divの中にimgを追加するのはappendChild()を使っています。
divとimgを追加するデモページ
　

tableを生成する

最後に複数の要素を使用しているtableを生成してみます。

JavaScript

// table要素を生成
var table = document.createElement('table');

// tr部分のループ
for (var i = 0; i < 3; i++) {
	// tr要素を生成
	var tr = document.createElement('tr');
	// th・td部分のループ
	for (var j = 0; j < 3; j++) {
		// 1行目のtr要素の時
		if(i === 0) {
			// th要素を生成
			var th = document.createElement('th');
			// th要素内にテキストを追加
			th.textContent = i + '-' + j;
			// th要素をtr要素の子要素に追加
			tr.appendChild(th);
		} else {
			// td要素を生成
			var td = document.createElement('td');
			// td要素内にテキストを追加
			td.textContent = i + '-' + j;
			// td要素をtr要素の子要素に追加
			tr.appendChild(td);
		}
	}
	// tr要素をtable要素の子要素に追加
	table.appendChild(tr);
}

// 生成したtable要素を追加する
document.getElementById('wrapper').appendChild(table);

for文でtable内のtr、tr内のth/tdを回して生成しています。
tableを追加するデモページ
　

【参考サイト】

• document.createElement – Web API インターフェイス | MDN