appendChildの注意点
今回は生のJavaScriptのtipsを
タイトルの通り、appendChildについて
デモをjsfiddleで作成しておきました
パッと見、
コードを見ると両方のdivタグにparaが表示されそうじゃないですか？
結果はでも通りで
2つ目のdivタグ内にしか表示されていないですよね
mozillaで挙動を確認すると、
Node.appendChild() メソッドは、特定の親ノードの子ノードリストの末尾にノードを追加します。追加しようとしたノードが既に存在していたら、それは現在の親ノードから除かれ、新しい親ノードに追加されます（他のノードに追加する前にそのノードを親ノードから削除する必要はありません）。
つまり今回の例でいうと、
forEach内では
1つ目のdivにちゃんとnodeを追加したが、
次のループで、すでに追加しようとしたnodeがdocumentがあるので
その既存のnode(1つ目のdivに追加されたもの)を2つ目のdivに移動した
その結果、1つ目のdivには表示されなく、2つ目のdivのみに表示されたということですね
個人的に落とし穴になりそうなポイントだと思っています
