要素の追加 (append)

要素の追加

<script type="text/javascript">
<!--
window.onload = function() {
	if (!document.createElement) return;

	var ele = document.createElement("div");		// 新規に要素（タグ）を生成
	var str = document.createTextNode("あいうえお");	// 生成する要素の値（文字列）
	ele.appendChild(str);					// 生成する要素の作成（要素に値を追加）

	document.body.appendChild(ele);				// このページ (document.body) の最後に生成した要素を追加
}
// -->
</script>

既存のエレメント（要素）に別の要素を追加する場合は createElement() を使用して新たな要素を生成します。生成する要素にテキストを追加する場合は createTextNode() を使用して appendChild() で追加します。そして、追加する要素を指定した要素の最後に appendChild() で追加します。

上記のスクリプトを実行するとページの一番最後に <div>あいうえお</div> という要素を追加することができます。

任意の場所に追加する

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
function appendTest1() {
	if (!document.createElement || !document.getElementById) return;

	// 生成する要素と属性
	var img = document.createElement("img");
	img.setAttribute("src", "./image/picture/bg01.gif");	// img.src = "./image/picture/bg01.gif";
	img.setAttribute("alt", "写真");			// img.alt = "写真";

	document.getElementById("pic").appendChild(img);	// pic という id に追加
}
function appendTest2() {
	if (!document.createElement || !document.getElementById) return;

	var a = document.createElement("a");
	a.href = "./index.html";
	var str = document.createTextNode("[BACK]");
	a.appendChild(str);

	document.getElementById("link").appendChild(a);
}
function appendTest3() {
	if (!document.createElement) return;

	var opt = document.createElement("option");
	opt.value = "ddd";
	var str = document.createTextNode("DDD");
	opt.appendChild(str);

	document.form1.select1.appendChild(opt);
}
// -->
</script>
</head>
<body>
<p id="pic">あいうえお</p>
<a href="javascript:appendTest1();">画像を追加</a>

<p id="link">かきくけこ</p>
<a href="javascript:appendTest2();">リンクを追加</a>

<form action="#" name="form1">
<select name="select1" size="5" onchange="alert(this.value);">
<option value="aaa">AAA
<option value="bbb">BBB
<option value="ccc">CCC
</select>
<input type="button" value="追加" onclick="appendTest3();">
</form>
</body>
</html>

追加したい要素に id や name 属性で名前を付けておくことで任意の場所に追加することができます。

要素に属性を追加する場合は、setAttribute("属性名", "属性値"); のように setAttribute() を使用して追加しますが、ほとんどの属性名（ここで使用している src, alt, href, value 等）は対象の要素に直接指定することもできます。

option を任意の位置に追加する

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
function appendTest4(obj) {
	if (!document.createElement) return;

	var insert = 2;					// <option> を追加する位置（一番上は0）
	var opt = document.createElement("option");
	opt.value = "ccc";
	var str = document.createTextNode("CCC");
	opt.appendChild(str);

	obj.insertBefore(opt, obj.options[insert]);
}
// -->
</script>
</head>
<body>
<form action="#">
<select name="select1" size="5" onchange="alert(this.value);">
<option value="aaa">AAA
<option value="bbb">BBB
<option value="ddd">DDD
</select>
<input type="button" value="追加" onclick="appendTest4(this.form.select1);">
</form>
</body>
</html>

任意の位置に option のリストを追加したい場合は insertBefore() を使用して追加することができます。追加場所は options[insert] にて指定します。関数呼び出し時に appendTest4(this.form.select1); として代入していますので、引数 obj は呼び出したフォームのセレクト部を指します。insertBefore() で位置 (obj.options[insert]) を指定して、追加したい要素 (opt) を追加対象 (obj) に追加 (insertBefore) します。

この例では、上から2番目（BBB と DDD の間）に追加されます。別の方法での追加方法（Macintosh 版の Internet Explorer 5.x で追加されない場合も含む）

指定した要素に追加する

<script type="text/javascript">
<!--
if (document.createElement && document.getElementsByTagName) {
	// 追加する新しい要素と属性
	var meta = document.createElement("meta");
	meta.name = "viewport";
	meta.content = "width=device-width, initial-scale=1.0";

	document.getElementsByTagName("head")[0].appendChild(meta);	// document.getElementsByTagName("head").item(0).appendChild(meta);

	var favicon = new Array("icon", "shortcut icon");
	for (var i in favicon) {
		var link = document.createElement("link");
		link.rel = favicon[i];
		link.type = "image/x-icon";
		link.href = "./favicon.ico";

		document.getElementsByTagName("head")[0].appendChild(link);
	}

	var script = document.createElement("script");
	script.type = "text/javascript";
	script.src = "./script.js";

	document.getElementsByTagName("head")[0].appendChild(script);
}
// -->
</script>

たとえば、meta や link などのヘッダに記述するタグの場合は、その要素を生成し属性と値を指定します。<head> は HTML の中に1つなので document.getElementsByTagName("head")[0] として1番目の <head> に追加します。

上記のスクリプトを実行すると <head> ～ </head> に以下の要素を追加することができます。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="./favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
<script type="text/javascript" src="./script.js"></script>