ノードの置換について

ノードの置換について試してみます。
一つ前の投稿でノードの削除をやりましたが、今回は削除するノードを置き換える動きです。
こちらも削除と同様に親ノードからたどって子ノードを指定し、そのノードを置き換えます。

実際にサンプルを用意して、ノードの置換をしてみます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>

<div id="test1">
	<div id="p1" name="p1name">
		<div id="p2" name="p2name">p2text</div>
		<div id="p3" name="p3name">p3text</div>
		<div id="p4" name="p4name">p4text</div>
		<div id="p5" name="p5name">p5text</div>
		<div id="p6" name="p6name">p6text</div>
	</div>
</div>

<script type="text/javascript">
// Elementノードを取得
let p1 = document.getElementById("p1");
let p2 = document.getElementById("p2");
let p3 = document.getElementById("p3");
let p4 = document.getElementById("p4");
let p5 = document.getElementById("p5");
let p6 = document.getElementById("p6");

// テスト用のノードを生成
let tn1 = document.createTextNode(" _TextNode1_ ");

// 取得した親ノード「p1」の子ノード「p4」を「tn1」に置換する
p1.replaceChild(tn1, p4);
</script>

</body>
</html>

サーバ上のHTMLはこちら(test1.html)

出力結果は次のようになります。
　※…アクセスした画面のHTMLソースを抜粋

<div id="p1" name="p1name">
	<div id="p2" name="p2name">p2text</div>
	<div id="p3" name="p3name">p3text</div>
	 _TextNode1_ 
	<div id="p5" name="p3name">p5text</div>
	<div id="p6" name="p3name">p6text</div>
</div>

親ノードからたどり、4つめのノードが、生成した「_TextNode1_」ノードに置き換わっています。

注意が必要なのは、置き換える内容は、ノードでなければ動作はしません。
例えば

p1.replaceChild('test', p4);

という書き方でノードの「p4」を置き換えようとしても、第一引数に単純な文字列を指定しているので、関数が動作しません。
第一引数には「createElement」や「createTextNode」で生成した要素を指定することで、ノードの置換が可能になります。

ノードの置換について

コメントを残す