問題
要素を複製(コピー)するには?
解決策
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
コメント