2016/7/21更新

jQueryで要素をコピーする：clone()

clone() は要素のコピーを作成するメソッドです。要素に設定されているイベントハンドラもコピーすることができます。

同じ要素を何度も使用するときに便利なメソッドです。

clone() の使い方

clone() の記述方法は以下の通りです。

jQueryオブジェクト.clone(論理値)

1	jQueryオブジェクト.clone(論理値)

clone() は戻り値にコピーされた jQuery オブジェクトを返します。

引数に true を指定するとイベントハンドラも同時にコピーされます。引数に何も指定しなかった場合は、イベントハンドラはコピーされません。

以下は、ボタンをクリックするとボタンがコピーされ追加される例です。

HTML

<button name="clone">Clone!</button>

1	<button name="clone">Clone!</button>

jQuery

<script>
  $('button[name=clone]').on('click', function () {
    $(this).clone(true).insertAfter(this);
  });
</script>

$('button[name=clone]').on('click', function () {

$(this).clone(true).insertAfter(this);

});

</script>

上の例では、引数に true を指定しているので、コピーされた方のボタンをクリックした場合でも新しいボタンが作成されます。

もし引数に何も指定しなかった場合は、イベントハンドラはコピーされず、コピーされた方のボタンをクリックしてもイベントは発生しません。

jQuery