Q&A
「このサイトによると」とありますが、URLを提示されてはいかがでしょうか。
pタグ（pノード?）をbodyの最後に付けました。
しかし、このサイトによると「追加しようとしたノードが既に存在していたら、それは現在の親ノードから除かれ、新しい親ノードに追加されます」と書かれています。
実際に既にbodyの最後に<p></p>がある状況で
var p = document.createElement("p"); document.body.appendChild(p);
としたら、最後の<p></p>の直前にもう一つの<p></p>が挿入されただけでした。
ごく普通の動きだと思いますが「追加しようとしたノードが既に存在していたら、それは現在の親ノードから除かれ、新しい親ノードに追加されます」とか「ノードが同時にドキュメントの 2 箇所に存在できない」というのはどういう意味なのでしょうか。
追加↓
var p = document.createElement("p"); var a = document.querySelector("p"); a.appendChild(p);
回答3件
0
Node.appendChild
https://developer.mozilla.org/ja/docs/Web/API/Node/appendChild
追加しようとしたノードが既に存在していたら
確かに、「nullじゃないんだから存在しているに決まっているじゃないか」となりそうです。そこで英語版を見てみます。
https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild
If the given child is a reference to an existing node in the document,
「文書内のノードの参照だったら」です(※)。
こんなHTMLを用意して確認してみます。
HTML
1<!DOCTYPE html> 2<html><head><meta charset="UTF-8" /><title>t</title> 3<script> 4document.addEventListener('DOMContentLoaded', function(event) { 5 var p = document.createElement("p"); 6 p.textContent = 'created'; 7 8 document.contains(p); // false 9 document.body.appendChild(p); 10 console.log(document.body.innerHTML); 11 document.contains(p); // true 12 document.getElementById('div').appendChild(p); 13 console.log(document.body.innerHTML); 14}); 15</script> 16</head> 17<body> 18<p>p</p> 19<div id="div">div</div> 20</body> 21</html>
ただ追加されるだけだったのが…
<p>p</p> <div id="div">div</div> <p>created</p>
移動になっています。
<p>p</p> <div id="div">div<p>created</p></div>
※:「文書内」という言葉は誤解を招くのですすめられません。「文書ツリー内」にしましょう。
https://triple-underscore.github.io/DOM4-ja.html#in-a-document
https://dom.spec.whatwg.org/#in-a-document
投稿2017/12/11 07:19
総合スコア13749
0
ベストアンサー
例えば以下のHTMLがあります。
HTML
1<html> 2<head> 3</head> 4<body> 5 <div id="a"> 6 div A 7 </div> 8 <div id="b"> 9 div B 10 <div id="c"> 11 div C 12 </div> 13 </div> 14</body> 15</html>
このdiv Aを以下のコードでdiv CにappendChildします。
JavaScript
1var divA = document.querySelector("#a"); 2var divC = document.querySelector("#c"); 3divC.appendChild(divA);
するとdiv Aはもともと居た場所からdiv Cの中へ移動します。
HTML
1<body> 2 <div id="b"> 3 div B 4 <div id="c"> 5 div C 6 <div id="a"> 7 div A 8 </div> 9 </div> 10 </div> 11</body>
「追加しようとしたノードが既に存在していたら」というのは、すでにdocument内にあるものであれば、という意味です。document.createElementで生成しただけのエレメントはまだdocument内に含まれていません。
**「ノードが同時にドキュメントの 2 箇所に存在できない」**というのは、同じノードを複数箇所にappendしても、コピーされるのではなく移動するだけである、ということを指しています。
divAをdivCにappendChildしたあと、divBにもappendChildすると、最終的にdivAはdivBの中にだけ存在し、divCから移動したことになります。しかし、cloneNodeすれば話は別です。
JavaScript
1var divA = document.querySelector("#a"); 2var divC = document.querySelector("#c"); 3divC.appendChild(divA.cloneNode(true));
【動作サンプル】
https://jsfiddle.net/72ws2L0h/
投稿2017/12/11 01:06
総合スコア9206
なんとなくですがイメージがつかめました。
まだ時間がなくてやっていないのですが必ず自分で手を動かしてやってみます。
このたびはありがとうございます。
0
新規作成したノードではなく、文書内にすでにあるノードを.appendChildすると、コピーではなく移動になる、という意味です。
投稿2017/12/10 00:27
総合スコア145183
ありがとうございます。
質問本文で追加したようなコードで試してみたのですが、単に既にあるpノードの中にpノードが作られただけでした。
「移動」とはどういった現象なのでしょうか。
a「を」別の要素へappendChildすると、その場所に移動します。
まだ時間がなくてやっていないのですが必ずやりたいと思います。
このたびはありがとうございます。
あなたの回答
tips
プレビュー
