geta1972TweetPocketCheckJavascriptのElement操作は、素人が扱うと落とし穴がいっぱいあります。僕が個人的に最初の頃に理解できなかったことは、appendChildをすると、元エレメントが消えてしまうという現象が不思議でしかたがなかったのですが、エレメントの特性を理解する事で解決できたのですが、cloneNodeを組み合わせる事でスマートなソースコードになるという事も学習できました。ページ内の装飾用の画像データ扱いを知らないと、ベタにタグを作成していくだけの事ですが、コピーするだけでいいのであれば、作業効率が上がるので、知らないのはもったいない。残念ながら、HTMLタグには、インスタンスという概念が無いため、コピーしたエレメントを後からまとめて変更したりすることはできないのですが、img素材やcssなどをうまくしようすることでインスタンスのような効果をつけることが可能ですね。つまずきポイントエレメントをコピーする簡単なサンプルを作ってみました。1番目のdivの中にspanタグを作っています。CodePen.1番目のspanが消えているのが、わかりますか?代入されたエレメントは、appendChildすると、移動することになります。他にもinsertBeforeでも移動してしまうので、注意しましょうね。エレメントコピーのポイントappendChildする時にエレメントをコピーするだけでいいので、下記のようにするとコピーできます。CodePen.あまりにも簡単ですが、意外とcloneNodeをつけ忘れて元エレメントが消えてしまうという不具合出がちです。etc)と表示されていたので、ほぼ全てのブラウザで対応していると考えても問題ないでしょう。cloneNode()の理解cloneNode()関数は、何故copyNode()という名前にならなかったのか少しだけ不思議なんですが、cloneNodeはエレメント情報をコピーするだけの機能になります。cloneNode(true)としているのは、コピーの際に、内包する情報も含める場合は”true”を入れ、内包情報が不要の場合は”false”または、指定ないでOKです。この仕様も、内包するデータがいらない場合ってどういう場合なんでしょう?個人的にあまり経験がないので、trueを付けないパターンが創造できないですね。createElementするだけでいいのでは・・・?と考えがちですが、「それはそれ」と割り切って使いましょう。いえば、他サイトのリファレンスページなどに注意事項として「内容するIDを複製する可能性があるので要注意」と書かれていますが、これは、ページ内のユニークにするべきIDも含めて複製してしまうので、「IDはちゃんと書き直してね」ということのようです。したらID重複チェック機能などを作っておくと、トラブル回避できそうです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。