要素のコピー
イベントハンドラも含めてコピーする場合

$('div.panel').click(function(){
	$(this).clone(true).appendTo('div#content');
});

※要素のコピーには、イベントハンドラも含めてコピーするものと、要素のみをコピーするものとがある。どとらもその子要素までコピーされる。
意味が分かりにくいが、元の要素も含めてすべてのコピーされた要素をクリックすればコピーが繰り返される。
div.psanelのクリックにより自身がコピーされ、コピーされた要素もクリックに反応する。


実行例(青の枠内をクリックするとコピーされる)

パネルのタイトル

段落1

段落2


変更前のhtml
<div id="content">
<div class="panel">
<h3>パネルのタイトル</h3>
	<div class="entry">
		<p>段落1</p>
		<p>段落2</p>
	</div>
</div>
</div>

上に対して、「要素のみをコピー」の場合は最初の要素以外はクリックしても反応しない。下がそのスクリプト。

$('div.panel').click(function(){
	$(this).clone().appendTo('div#content');
});