問題 × 解決策

jQueryのclone()で要素を複製(コピー)する方法

問題

要素を複製(コピー)するには?

解決策

jQueryの「clone()」で要素を複製(コピー)する。

 

要素を複製(コピー)する

同一の内容を別の箇所に置く必要のある時、そのままHTMLで複製して配置するのは非効率に思えます。
なので今回はjQueryのclone()で要素を複製(コピー)する方法をご紹介します。

DEMOはこちら

テキストが複製されて、もう一方の方に配置されます。

元となるテキスト

このテキストが複製されます。

コピーされたテキスト

HTML

「コピーされたテキスト」の下にはテキストはありません。

<div class="clone-box">
<div class="original">
<h4 class="title-mark">元となるテキスト</h4>
<div class="clones">
<p class="text">このテキストが複製されます。</p>
</div>
</div>
<div class="copyto">
<h4 class="title-mark">コピーされたテキスト</h4>
</div>

javascript

「このテキストが複製されます。」というテキストの、クラス「clones」をコピーし、「コピーされたテキスト」の下に配置します。
$(‘要素のセレクタ’).clone()」で要素を複製(コピー)することができます。

if($('.clone-box').length){
	$('.clone-box .original .clones').clone().appendTo('.clone-box .copyto');
}

参照

【.clone() | jQuery 1.9 日本語リファレンス | js STUDIO】
http://js.studio-kingdom.com/jquery/manipulation/clone

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

20 − seventeen =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧