[jQuery] clone()で操作対象のエレメントを元の位置に保つ

jQueryでhtmlエレメントを操作するとき、エレメントを元の場所に残しておきたい場合があります。そういう場合はclone()を使います。

どういうことかというと、例えばボタンをクリックすると、その押したボタンが別の場所にあるDIVと入れ替わるような処理を書いたとします。コードでいうとこんな感じでしょうか。

<div>?</div>
<button>Change !!</button>
<script>
$("button").click(function(){
	var obj = $("div");
	$(this).replaceWith( obj );
});
</script>

これだとDIVが元の場所から無くなってしまうのですね。要するに、replaceWith()に限らずappend()でもafter()でも、jQueryのエレメントを移動させるメソッドはすべてカット＆ペーストになっているわけです。

で、DIVを元の場所に残したままで、そのコピーを移動したいという場合にclone()が登場するわけです。上のコードの場合だと、$("div")の後ろに.clone()をつなげることで、エレメントのコピーがvar objに代入されることになります。

<div>?</div>
<button>Change !!</button>
<script>
$("button").click(function(){
	var obj = $("div").clone();
	$(this).replaceWith( obj );
});
</script>

これで操作対象のエレメントを元の場所に保ったままで、移動や入れ替えなどをさせることができるようになるというわけです。