jQueryで要素を複製する

要素のクローンを作成する.clone()を使って、要素を複製する方法をメモ。

サンプルコード

HTML

<button id="button">複製ボタン</button>
<ul id="sample">
<li class="box01">BOX1</li>
<li class="box02">BOX2</li>
<li class="box03">BOX3</li>
</ul>

JavaScript

$(function() {
	$(document).on('click', '#button', function() {
		$('#sample li').clone().appendTo($('#sample'));
	});
});

jQueryで要素を複製するデモページ
#buttonをクリックすると、#sample内のliを複製して最後尾に挿入します。
$(‘#sample li’).clone() で複製した要素を選択した状態にして、.appendTo()で最後尾に挿入しています。