ノードの挿入について

前回の投稿ではノードを作成しましたが、今回は、作成したノードを
HTMLドキュメントに挿入する方法を試してみます。

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

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

<div id="test1">
	<div id="p1" name="p1name">p1text</div>
</div>

<script type="text/javascript">
// ID「test1」のノードを作成
let tn1 = document.createTextNode(" _TextNode1_ ");
console.log("tn1 -> " + tn1);

// Elementノードを取得
let p1 = document.getElementById("p1");

// 取得したノード「p1」に「tn1」を挿入
p1.appendChild(tn1);
</script>

</body>
</html>

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

出力結果は次のようになります。
　※…HTMLソースを抜粋

<div id="test1">
	<div id="p1" name="p1name">p1text _TextNode1_ </div>
</div>

また、appendChild()メソッドの他、insertBefore()メソッドもあります。
insertBeforeメソッドは、appendChildとは違い、挿入する位置が「前」になります。

具体的に次のようなサンプルを書いて、試してみます。

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

<div id="test1">
	<div id="p1" name="p1name">p1text</div>
	<div id="p2" name="p2name">p2text</div>
	<div id="p3" name="p3name">p3text</div>
	<div id="p4" name="p3name">p4text</div>
</div>

<script type="text/javascript">
// ID「test1」のノードを作成
let tn1 = document.createTextNode(" _TextNode1_ ");
console.log("tn1 -> " + tn1);

// Elementノードを取得
let p1 = document.getElementById("p1");
let p2 = document.getElementById("p2");
let p3 = document.getElementById("p3");
let p4 = document.getElementById("p4");

// 取得したノード「p2」の前に「tn1」を挿入
p1.insertBefore(tn1, p2);
</script>

</body>
</html>

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

上記を実行し結果、「_TextNode1_」は画面上にどう出力されるか試してみました。

結果、予想とは違い、

console出力上では、以下のエラーメッセージが出ました。

tn1 -> [object Text]
test2.html:26 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at https://propansystem.net/blogsample/js/037/test2.html:26:4

出力されたエラーメッセージを読むと、

「新しいノードが挿入される前のノードは、このノードの子ではありません。」

という意味になり、insertBeforeはノードの子要素に対しての命令であることがわかります。

エラー内容を踏まえて、上記のサンプルを書き変えて、次のようにしてみました。

<!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="p3name">p4text</div>
	</div>
</div>

<script type="text/javascript">
// ID「test1」のノードを作成
let tn1 = document.createTextNode(" _TextNode1_ ");
console.log("tn1 -> " + tn1);

// Elementノードを取得
let p1 = document.getElementById("p1");
let p2 = document.getElementById("p2");
let p3 = document.getElementById("p3");
let p4 = document.getElementById("p4");

// 取得したノード「p2」の前に「tn1」を挿入
p1.insertBefore(tn1, p2);
</script>

</body>
</html>

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

htmlにアクセスすると、画面には

_TextNode1_
p2text
p3text
p4text

という結果が出力されます。

「id=”p2″」のノードの前に、新規作成した「_TextNode1_」のノードが挿入されていることがわかります。

さらに、「ノード「p3」の前に「tn1」を挿入」したパターンも試してみます。

htmlは以下のようにしました。

<!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="p3name">p4text</div>
	</div>
</div>

<script type="text/javascript">
// ID「test1」のノードを作成
let tn1 = document.createTextNode(" _TextNode1_ ");
console.log("tn1 -> " + tn1);

// Elementノードを取得
let p1 = document.getElementById("p1");
let p2 = document.getElementById("p2");
let p3 = document.getElementById("p3");
let p4 = document.getElementById("p4");

// 取得したノード「p3」の前に「tn1」を挿入
p1.insertBefore(tn1, p3);
</script>

</body>
</html>

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

出力結果は、以下のようになります。

p2text
_TextNode1_
p3text
p4text

insertBeforeメソッドの第2引数を「id=”p3″」にしたため、
新規作成した「_TextNode1_」のノードが

<div id="p3" name="p3name">p3text</div>

の前に挿入されていることがわかります。

ノードの挿入について

コメントを残す