diadia

興味があることをやってみる。自分のメモを残しておきます。

Nodeを置換する

Javascript

ベース記事

Javascriptメモ
DOM操作について

Nodeを置換する方法

replaceChild()を使うと置換することができる。

大まかに言えばappendChild()を使ってノードを追加する方法とほぼ同じ。

違うところは、replaceChild()をの引数は２つあり、newNode, oldNodeの順に引数を渡さなければならない。

参考例

<!DOCTYPE html>
<html lang="utf-8">
<head>
	<meta charset="utf-8">
	<title>ノード置換</title>
</head>
<body>
	<!--ボタンを押すとリストの内容を取り替えるプログラムを書く-->
	<ul id="lists">
	<li id="curry">おいしいカレー</li>
	<li id="tako">おいしいたこやき</li>
	</ul>

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

	<script>
		function replacing(){
			var content_list = document.createElement("li");
                        var text = document.createTextNode("やさいおいしい");
			content_list.appendChild(text);
			var tako = document.getElementById("tako");
			lists.replaceChild(content_list, tako);				
	}

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