JavaScript入門講座

Home > DOMによるノードの追加

DOMによるノードの追加

ノードを追加するにはまず、追加するノードを作成します。作成するノードの種類に応じて以下の主なメソッドを使用します。

メソッド作成するノード
createElement要素ノード(タグ)
createAttribute属性ノード
createTextNodeテキストノード
createCDATASectionCDATAセクション
createCommentコメントノード
createEntityReference実態参照ノード
createProcessinglnstruction処理命令ノード
createDocumentFragmentドキュメントの断片

次に作成したノードを追加しますが、ドキュメントに追加する方法としてappendChildメソッドとinsertBeforeメソッドを使用する方法があります。

appendChildメソッドは一番最後の要素としてドキュメントに追加する場合に使用します。

要素ノード.appendChild(追加するノード)

insertBeforeメソッドは第1引数で挿入するノードを指定し、第2引数で挿入先のノードを指定します。なお、一番最後の要素としてドキュメントに追加したい場合は第2引数にnullを指定します。

要素ノード.insertBefore(挿入するノード,ノード)

以下のサンプルではインプットテキストにサイト名とURLを入力してドキュメントにリンクを追加しています。

<html>
<head>
<title>JavaScript addNode</title>
<script type="text/javascript">
function addNode(){
	//要素ノード(タグ)作成
	var anchor = document.createElement("a");
	var br = document.createElement("br");
	
	anchor.href = fm.url.value;
	//テキストノード作成
	var siteName = document.createTextNode(fm.siteName.value);
	//アンカータグにテキストノード追加
	anchor.appendChild(siteName);

	//追加先取得
	var link = document.getElementById("link");

	//要素ノードを追加
	link.appendChild(anchor);
	link.appendChild(br);
}
</script>
<head/>
<body>
<form name="fm">
サイト名:<br />
<input type="text" name="siteName" size="50" /><br />
URL:<br />
<input type="text" name="url" size="50" /><br />
<input type="button" value="追加" onclick="addNode()">
</form>
<div id="link"></div>
</body>
</html>