clone()

このエントリーをはてなブックマークに追加

clone()は要素を複製するためのメソッドです。

たとえば次のようなHTMLがあったとします。

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

これに次のようにappendTo()で変更したところ、以下のようなHTMLに変更されます。

$('.hello').appendTo('.goodbye');
<div class="container">
	<div class="goodbye">
		Goodbye
		<div class="hello">Hello</div>
	</div>
</div>

しかしclone()を利用することで複製した要素を移動して挿入することが可能です。

$('.hello').clone().appendTo('.goodbye');
<div class="container">
	<div class="hello">Hello</div>
	<div class="goodbye">
		Goodbye
		<div class="hello">Hello</div>
	</div>
</div>

引数にtrueを指定することで、要素に関連付けられたイベントやjQuery 1.4で追加されたdata()の値なども複製されます。

$('.hello').clone(true)

jQuery 1.5より第2引数にtrueを指定することで、子孫要素に関連付けられたイベントやdata()の値なども複製されます。

$('.hello').clone(true,true)
jQuery 1.0.0での追加/変更

clone()はjQuery 1.0.0で追加されたメソッドです。

jQuery 1.4.0での追加/変更

jQuery 1.4.0よりdataを含めた複製が追加されました。

jQuery 1.5.0での追加/変更

jQuery 1.5.0より子孫要素のイベントやdataを含めた複製が追加されました。

参考URL

.clone() | jQuery API Documentation

登録日 : 2013年04月19日 最終更新日 : 2013年4月19日

同じカテゴリー(Manipulation)のエントリー

検索

スポンサードリンク

バージョン

リファレンス