ノードの置換について
ノードの置換について試してみます。
一つ前の投稿でノードの削除をやりましたが、今回は削除するノードを置き換える動きです。
こちらも削除と同様に親ノードからたどって子ノードを指定し、そのノードを置き換えます。
実際にサンプルを用意して、ノードの置換をしてみます。
[js]
<!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>
[/js]
出力結果は次のようになります。
※…アクセスした画面のHTMLソースを抜粋
[js]
<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>
[/js]
親ノードからたどり、4つめのノードが、生成した「_TextNode1_」ノードに置き換わっています。
注意が必要なのは、置き換える内容は、ノードでなければ動作はしません。
例えば
[js]
p1.replaceChild(‘test’, p4);
[/js]
という書き方でノードの「p4」を置き換えようとしても、第一引数に単純な文字列を指定しているので、関数が動作しません。
第一引数には「createElement」や「createTextNode」で生成した要素を指定することで、ノードの置換が可能になります。