(cache) 要素の追加 (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() で適用します。そして、追加するエレメントを指定したエレメントの最後に追加します。

上記のスクリプトを実行するとページの一番最後に <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 ele = document.createElement("img");
	ele.setAttribute("src", "./image/picture/bg01.gif");	// ele.src = "./image/picture/bg01.gif";
	ele.setAttribute("alt", "写真");			// ele.alt = "写真";

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

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

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

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

	document.form1.select1.appendChild(ele);
}
// -->
</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() を使用して属性値を追加します。JavaScript で使用可能なのが条件ですが、ほとんどの属性（ここで使用している 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 で追加されない場合も含む）