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

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

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

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

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

jQuery

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

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

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

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

サンプル

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

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

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

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

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

jQuery
スポンサーリンク
blogをフォローする
フロントエンジニア&コーダーのためのマテリアルブログ

コメント

タイトルとURLをコピーしました