appendChild とノードの移動
appendChild や insertBefore でノードを追加すると、元の位置からは削除され、ノードが移動する挙動になる。この例では、ボタンを押すと appendChild でノードが移動しているのがわかる。
body 以下に直接ついていないノード、例えば動的に createElement したノードでも同様だ。
次の例では、3 つのノードを作りそれをループで appendChild している。appendChild するたびに追加したノードは nodes リストから削除される。そのため、1 番目と 3 番目のノードだけが追加されることになる。一度目のループでは 0 番目の要素が append され、それがリストから削除される。2 度目のループの際にはリストの長さは 2 になっており、その 1 番目の要素、つまりもとのリストの最後の要素が append される
このようにループと組み合わさることで、一見直感に反する挙動になってしまうことがある。今回の場合は NodeList を配列にコピーするとこれを回避できる。この例では Array.prototype.slice.call で NodeList を配列にしている。意図したとおり 3 つの要素すべてが append される。
または cloneNode でノードをコピーしてもよい。
appendChild だけではなく insertBefore などでも同様の挙動になる。
参考
