diadia

趣味のプログラムを書く 

ノードを追加する

ベース記事

DOM操作について
Javascriptメモ

ノードを追加するやり方

やりたいイメージ:例えばカラの

<ul></ul>

があるとする。ここにリストタグを追加するということをやりたい。リストタグはエレメントというノードの一つである。
だからノードを操作するコードが分かれば追加することも当然できる。

参考例文

<!DOCTYPE html>
<html lang="utf-8">
<head>
	<meta charset="utf-8">
	<title>ノード追加</title>
</head>
<body>
	<!--ノードを追加するプログラムを書く-->
	<ul id="blank_list">
	</ul>

	<input type="button" value="追加" onclick="adding();">

	<script>
		function adding(){
			var content_list = document.createElement("li");
                        var text = document.createTextNode("やさいおいしい");
			content_list.appendChild(text);
			blank_list.appendChild(content_list);				
	}

 	</script>
</body>
</html>

ノード追加に必要なメソッド

  1. createElement()
  2. createTextNode()
  3. appendChild()