appendChild()ってmoveChild()だったんだ

　最近JavaScript熱が再燃しているかみぃ。
　一年ぐらい前に初めてinnerHTMLを知って、document.writeしたものを後から操作できるということに感動してまだ間もないというのに、世間的にはこれからはDOM操作が主流で、もはやinnerHTMLで要素をいじくり回すのは、よろしくないという風潮らしい。
　プログラム言語も時代と共に成長する生き物だから、そういった時流に逆らうことなく、かみぃも少しずつDOM操作主体に切り替え中。

　で、そのお勉強の最中、エレメントにオブジェクトを追加する「appendChild()」、ノードを削除する「removeChild()」、ノードを置換する「replaceChild()」といったメソッドはあるのに、なんでエレメントのノードを別のエレメントに移動させる「moveChild()」的なメソッドてのが無いんだろうと、ずっと不思議に思っていたわけ。

　仕方ないから、これまで、

var obj = org.cloneNode(true); //元のノードを複製
element.appendChild(obj); //複製した要素を移動先に追加
org.parentNode.removeChild(org); //元のノードを削除

っていう、手間の掛かることをやっていた。

　が、ある時気付いちゃいました。
　表題のappendChild()であります。
　「指定したエレメントにオブジェクトを追加する」と説明されるこのメソッド、実はこれこそがノードを移動するmoveChild()（と呼ぶべきもの）だったのです。（断言していいのか？）

　先の例だと、

element.appendChild(org);

だけで移動できちゃう。

　これに気付いたときには、あまりに目から鱗で、「これでいいのか！」って思わず声に出して叫んじゃった。

　漠然と、createElement()やcloneNode()で新しく作った要素って、まだ実際には誕生前の要素で、appendChild()（insertBefore()やreplaceChild()でもいいけど）して初めて形あるものとして誕生するんだと思っていたけど、createElement()やcloneNode()した時点で確かに誕生してて、appendChild()するとは、それを目に見える場所に出してやる＝移動してやるってことだったのね。
　ふむふむ、また少しDOMって概念がわかってきたような気がするぞ。

　ということで、以下はサンプルスクリプト。

サンプル

A

B C

ソース
<script type="text/javascript">
function move () {
var blueObj = document.getElementById('blue');
var redObj = document.getElementById('red');
if (blueObj.childNodes.length > 0) { //blueに要素があれば
redObj.appendChild(blueObj.childNodes[0]); //それをredの末尾へ移動
}
else { //なければ
blueObj.appendChild(redObj.childNodes[0]); //redの先頭の要素をblueへ移動
}
}
</script>
<div id="blue" style="background-color: #6666FF; padding: 5px; height: 1.5em;"><strong> A </strong></div>
<div id="red" style="background-color: #FF6666; padding: 5px; height: 1.5em;"><strong> B </strong><strong> C </strong></div>
<form><input type="button" value="移動" onclick="move();" /></form>