DOMによるノードの追加
ノードを追加するにはまず、追加するノードを作成します。作成するノードの種類に応じて以下の主なメソッドを使用します。
メソッド | 作成するノード |
---|---|
createElement | 要素ノード(タグ) |
createAttribute | 属性ノード |
createTextNode | テキストノード |
createCDATASection | CDATAセクション |
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>
DOMとは | ノードの取得 | ダイレクトアクセスによる取得 | ノードウォーキングによる取得 | ノード属性の取得 | ノード属性の設定 | ノードの追加 | ノードの削除