.clone()

http://api.jquery.com/clone/

各要素のディープコピーを作成します。

.clone( [withDataAndEvents] ) 1.0追加
.clone( [withDataAndEvents] [, deepWithDataAndEvents] ) 1.5追加
サンプル
補足事項
デモ

.clone( [withDataAndEvents] ) 1.0追加

戻り値:jQuery

引数	説明
[withDataAndEvents]	boolean値で、マッチしている要素に付随しているイベントハンドラもコピーするかどうかを決定します。 jQuery1.4からは保持しているdataも同様にコピーの対象になります。

.clone( [withDataAndEvents] [, deepWithDataAndEvents] ) 1.5追加

戻り値:jQuery

引数	説明
[withDataAndEvents]	boolean値で、マッチしている要素に付随しているイベントハンドラもコピーするかどうかを決定します。 jQuery1.4からは保持しているdataも同様にコピーの対象になります。 (初期値はfalseでしたが、jQuery1.5でtrueになり、jQuery1.5.1で再度falseにもどされました。)
[deepWithDataAndEvents]	boolean値で、マッチしている要素の全ての子要素に対しても、付随しているイベントハンドラとDataをコピーするかどうかを決定します。この初期値は1つ目の引数と同じになります。

サンプル

.clone()メソッドはマッチした要素の子(子孫)要素とテキストノードも含め、出来るだけコピーするように動作します。ページ上の要素のコピーに、.clone()メソッドを挿入系のメソッドと組み合わせて使用すると便利です。

次のようなコードがあった場合、

<div class="container">
  <div class="inner">こんにちは</div>
  <div class="inner">さようなら</div>
</div>

.appendTo()メソッドを使用して、下記のように処理をすると元の位置から要素が移動されます。

$('.hello').appendTo('.goodbye');

結果は次のようになります。

<div class="container">
  <div class="goodbye">
    さようなら
    <div class="hello">こんにちは</div>
  </div>
</div>

元の要素はそのままで、コピーを作成したい場合は下記のようにします。

$('.hello').clone().appendTo('.goodbye');

結果は次のようになります。

<div class="container">
  <div class="hello">こんにちは</div>
  <div class="goodbye">
    さようなら
    <div class="hello">こんにちは</div>
  </div>
</div>

補足事項

withDataAndEventsの引数をtrueに指定すれば、イベントハンドラやDataもコピーすることが可能ですが、 Dataの配列やオブジェクトはコピーではなく参照になってしまいます。
これらについてもコピーにしたい場合は、下記のように手動でコピー作業を行う必要があります。

var $elem = $('#elem').data("arr": [ 1 ]), //オリジナル要素
    $clone = $elem.clone(true)
    .data("arr", $.extend([], $elem.data("arr")));  //extendを使用します

デモ

全てのB要素をコピーし、それらを全てのP要素内の前に挿入します。

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<b>こんにちは</b>
<p>, 調子はどうですか?</p>
<script>
  $("b").clone().prependTo("p");
</script>
</body>
</html>

.clone()メソッドを使用してマッチした要素の組み合わせをコピーした場合、DOMから切り離されているとDOMに挿入する際に各要素の順序が保証されません。ただし、下記のように対応すれば要素の順番を保証させることが可能かもしれません。

<!DOCTYPE html>
<html>
<head>
  <style>
  #orig, #copy, #copy-correct {
    float: left;
    width: 20%;
  }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="orig">
  <div class="elem"><a>1</a></div>
  <div class="elem"><a>2</a></div>
  <div class="elem"><a>3</a></div>
  <div class="elem"><a>4</a></div>
  <div class="elem"><a>5</a></div>
</div>
<div id="copy"></div>
<div id="copy-correct"></div>
<script>
// 順番が保証されず、ブラウザによって見え方が変わるかもしれません。
$('#copy').append($('#orig .elem')
          .clone()
          .children('a')
          .prepend('foo - ')
          .parent()
          .clone());

// 順番を保持するための適切な対応です。
$('#copy-correct')
          .append($('#orig .elem')
          .clone()
          .children('a')
          .prepend('bar - ')
          .end());
</script>
</body>
</html>