【clone】jQueryで簡単に既存の要素をコピーして追加する方法

cloneメソッドを使用することで簡単に要素やテキストをコピーすることができます。

例えばページの中で同じ要素を出したい場合に使うことができます。

同じ要素のhtmlが二つあると修正が発生したときに両方を対応する必要があります。

cloneメソッドでコピーして追加しておけばもともとある方のみ修正すればよいので修正する手間も省くことができます。

jQuery(function() {
        jQuery('button').click(function() {
                jQuery('#clone').clone().appendTo(jQuery('.box'));
        });
});

cloneメソッドで要素やテキストをコピーすることができます。

appendToは要素の末尾に追加します。

サンプル

下記はサンプルになります。

補足するとボタンをクリックすると「アイテム」の文字列をコピーします。

そしてappendToでクラスboxの中にコピーした内容を出力します。

ボタンを押すことにその繰り返しになります。