appendしたら持ってかれるのかよ!

どーもどーも。

今月は、ブログさぼってjavascriptの勉強をしておりました。

それをネタにすればいいのに、それすら惜しんでしまいました。

あとで、自分のためにも書き残しておいた方がいいのにね。

 

というわけで、今回は、jQueryでおよよとなってしまったところを覚え書きとして残しておこうと思います。

 

jQueryを使って、html内の特定の要素を別のものに変化させようとしていたんだけど、結果が思わしくなかったのです。

 

appendって追加するんじゃなかったっけ?

ちょっとしたサンプルを作ってみました。

「あいうえお」「かきくけこ」「さしすせそ」「たちつてと」の div の中から、3番目の div をappendして、別の div に追加しようとしているところです。

 

ぽちっと「実行」ボタンをクリックすると、

append-01

こうなります。

 

append-02

 

元々のノードはそのままに、「さしすせそ」だけ追加しようとしていたのですが、元々のノードから引っこ抜かれてしまいました。

 

appendしたら引き抜かれます

そう、そういえばDOMってそんな感じだったかもしれない。

XMLだと、もうちょっとめんどくさかった記憶があるんだけど、HTMLは気軽にさくっとできちゃうんだね。

という訳で、今回は、元々のノードはそのまま残したかったので、コピーしたものを append しなきゃだめだった。。

 

 

これでできました♪

append-03

 

 

 

まとめ

appendを使用する際は、追加するもとを残しておきたいときはcloneを使う。

コピーしたノードをappendする分には、追加するもとが変化する事はない。

 

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です