jQuery
clone（）
は、一致する要素のコピーを作成するために使用されます。また、対応する要素と一緒にイベントハンドラとデータをコピーする必要があるかどうかを示すブール型パラメータもサポートしています。
1. html要素を複製する
たとえば、次のhtmlコードをクローンします。
<div class="smallBox">
I'm a small box
<div class="smallInnerBox">I'm a small small inner box</div>
</div>
上記の要素のコピーを作成するにはclone（）を使用し、クラス名が “smallBox”のdivタグの後にコピーした要素を配置します。
$('.smallBox').clone().insertAfter(".smallBox");
結果 :
<div class="smallBox">
I'm a small box
<div class="smallInnerBox">I'm a small small inner box</div>
</div>
<div class="smallBox">
I'm a small box
<div class="smallInnerBox">I'm a small small inner box</div>
</div>
2.イベントハンドラをクローン化する
次の例では、ボタンのクリックイベントを複製し、idが ‘cloneButton1’のボタンをコピーします。
<button id="cloneButton1">clone()</button>
<script type="text/javascript">
$("#cloneButton1").click(function () {
$('.smallBox').clone().insertAfter(".smallBox");
});
</script>
デフォルトの** clone（）メソッドまたはclone（false）メソッドを使用している場合は、button要素のみをコピーしますが、click（）イベントハンドラはコピーしません。
$('#cloneButton1').clone().insertAfter("#cloneButton1");
一致する要素とともにclick（）イベントハンドラをコピーするには、clone（true）を使用する必要があります。
$('#cloneButton1').clone(true).insertAfter("#cloneButton1");
自分で試してみてください
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
.smallBox{
padding:8px;
border:1px solid blue;
margin:8px;
}
.smallInnerBox{
padding:8px;
border:1px solid green;
margin:8px;
}
</style>
</head>
<body>
<h1>jQuery clone() example</h1>
<div class="smallBox">
I'm a small box
<div class="smallInnerBox">I'm a small small inner box</div>
</div>
<p>
<button id="cloneButton1">clone()</button>
<button id="cloneButton2">clone() button (default)</button>
<button id="cloneButton3">clone(true) button</button>
<button id="reset">reset</button>
</p>
<script type="text/javascript">
$("#reset").click(function () {
location.reload();
});
$("#cloneButton1").click(function () {
$('.smallBox').clone().insertAfter(".smallBox");
});
$("#cloneButton2").click(function () {
$('#cloneButton1').clone(false).insertAfter("#cloneButton1");
});
$("#cloneButton3").click(function () {
$('#cloneButton1').clone(true).insertAfter("#cloneButton1");
});
</script>
</body>
</html>
