[Javascript] ElementのコピーはcloneNode

JavascriptのElement操作は、素人が扱うと落とし穴がいっぱいあります。 僕が個人的に最初の頃に理解できなかったことは、appendChildをすると、元エレメントが消えてしまうという現象が不思議でしかたがなかったのですが、エレメントの特性を理解する事で解決できたのですが、cloneNodeを組み合わせる事でスマートなソースコードになるという事も学習できました。 そもそも、WEBページ内で同じ要素（エレメント）をコピーして使うパターンってどういう場合でしょう？

1. tableのレコードデータをコピーして利用するような場合 2. ゲーム画面でキャラクターチップ 3. ページ内の装飾用の画像データ

扱いを知らないと、ベタにタグを作成していくだけの事ですが、コピーするだけでいいのであれば、作業効率が上がるので、知らないのはもったいない。 残念ながら、HTMLタグには、インスタンスという概念が無いため、コピーしたエレメントを後からまとめて変更したりすることはできないのですが、img素材やcssなどをうまくしようすることでインスタンスのような効果をつけることが可能ですね。

つまずきポイント

エレメントをコピーする簡単なサンプルを作ってみました。 まずは、基本の状態です。 1番目のdivの中にspanタグを作っています。

See the Pen element-1 by YugetaKoji (@geta1972) on CodePen.

次に、2番めのdiv内に1番目のspanを入れ込むためにappendCHildをしてみると・・・

See the Pen element-2 by YugetaKoji (@geta1972) on CodePen.

1番目のspanが消えているのが、わかりますか？ 代入されたエレメントは、appendChildすると、移動することになります。 他にもinsertBeforeでも移動してしまうので、注意しましょうね。

エレメントコピーのポイント

appendChildする時にエレメントをコピーするだけでいいので、下記のようにするとコピーできます。

See the Pen element-3 by YugetaKoji (@geta1972) on CodePen.

あまりにも簡単ですが、意外とcloneNodeをつけ忘れて元エレメントが消えてしまうという不具合出がちです。 Can I useで調べてみたところ、

browsers (since IE6+, Firefox 2+, Chrome 1+ etc)

と表示されていたので、ほぼ全てのブラウザで対応していると考えても問題ないでしょう。

cloneNode()の理解

cloneNode()関数は、何故copyNode()という名前にならなかったのか少しだけ不思議なんですが、cloneNodeはエレメント情報をコピーするだけの機能になります。 cloneNode(true)としているのは、コピーの際に、内包する情報も含める場合は"true"を入れ、内包情報が不要の場合は"false"または、指定ないでOKです。 この仕様も、内包するデータがいらない場合ってどういう場合なんでしょう？ 個人的にあまり経験がないので、trueを付けないパターンが創造できないですね。 単にcreateElementするだけでいいのでは・・・？と考えがちですが、「それはそれ」と割り切って使いましょう。 そういえば、他サイトのリファレンスページなどに注意事項として「内容するIDを複製する可能性があるので要注意」と書かれていますが、これは、ページ内のユニークにするべきIDも含めて複製してしまうので、「IDはちゃんと書き直してね」ということのようです。 もしかしたらID重複チェック機能などを作っておくと、トラブル回避できそうです。