.clone()

.clone()textareaselectに入力されたユーザーの選択内容など）の動的な状態は、クローン化された要素にはコピーされません。

.clone() は、挿入方法の 1 つと一緒に使用すると、ページ上の要素を複製する便利な方法です。 次のようなHTMLを考えてみましょう。

<div class="container">
 <div class="hello">Hello</div>
 <div class="goodbye">Goodbye</div>
</div>

.append()の議論で示されたように。 通常、要素がDOMのどこかに挿入されると、その要素は以前の位置から移動します。 つまり、コードを考えると

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

その結果、DOM構造は次のようになります。

<div class="container">
 <div class="goodbye">
 Goodbye
 <div class="hello">Hello</div>
 </div>
</div>

これを防ぎ、代わりに要素のコピーを作成するには、次のように記述します。 以下のように書くことができます。

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

これで生成されます。

<div class="container">
 <div class="hello">Hello</div>
 <div class="goodbye">
 Goodbye
 <div class="hello">Hello</div>
 </div>
</div>

通常、元の要素にバインドされているイベント ハンドラは、クローンにはコピーされません。 オプションの withDataAndEvents パラメータを使用すると、この動作を変更し、代わりに、要素の新しいコピーにバインドされたすべてのイベント ハンドラのコピーを作成することができます。 jQuery 1.4の時点では、すべての要素データ（.data()メソッドでアタッチされたもの）も新しいコピーにコピーされます。

ただし、要素データ内のオブジェクトや配列はコピーされず、複製された要素と元の要素の間で引き続き共有されます。 すべてのデータを深くコピーするには、それぞれを手動でコピーします。

// Original element with attached data
var $elem = $( "#elem" ).data( "arr", ),
 $clone = $elem.clone( true )
 // Deep copy to prevent data sharing

jQuery 1.5以降では、以下のようになります。5では、withDataAndEventsdeepWithDataAndEvents で強化することで、クローンされた要素のすべての子のイベントとデータをコピーすることができます。