01 February 2015

appendChild とノードの移動

appendChildinsertBefore でノードを追加すると、元の位置からは削除され、ノードが移動する挙動になる。この例では、ボタンを押すと 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 などでも同様の挙動になる。

参考

パーフェクトJavaScript
パーフェクトJavaScript
posted with amazlet at 15.02.01
技術評論社 (2014-10-31)
売り上げランキング: 8,486