enchant.jsにおけるノードの入れ替え

Spriteを最前面に持ってくる関数 / HTML5 enchant.js

childNodesで入れ替えられるんじゃない? と思ったけど無理だった。
childNodes.lengthで子ノードの個数を取得したりできたんで単なる配列と思っていたんだけど、表示のためにかいろいろ裏でやっているっぽい。

そんじゃinsertBeforeはどうよと――と思ったが、Before、つまり前に挿入するわけで最前面、つまり子ノードの一番最後に追加することはできない。@RickyTheta氏の書く通り、最前面に持ってくるにはremoveChild&addChildしか今のところ手がないようだ。

じゃあ間に持ってきたい場合は?
その時こそinsertBeforeを使おう。ただし注意点がある。insertBeforeは移動はしてくれない。

addChild(a);
addChild(b);
addChild(c);
insertBefore(c, b);

とした場合、childNodesは[a, c, b, c]となる。childNodesの最後尾(lastChild)にあるcが先頭にコピーされた形だ。
この状態でremoveChildでcを削除するとどちらのcが削除されるのか。
答えはaとbの間にあるc、前方にあるノードが削除される。

ノード移動の際はまずremoveChild、それからaddChildもしくはinsertBefore。