jQueryのclone関数を使って、ある要素をコピーする方法
ボタンを押すなどのアクションがあったらある要素をコピーして配置したい。
この様な悩みを解決いたします。
本記事では、jQueryのclone関数を使って、任意のアクションがあったらある要素をコピーする方法について解説いたします。
実装サンプルコード
See the Pen
clone関数例 by Kohei (@kouk05)
on CodePen.0
実装サンプルコードです。
ボタンを押すと、テキストがコピーされているのがわかります。
次章より詳細を説明します。
jQueryでclone関数を使う
$(function(){
$('button').click(function(){
//pタグをコピーして、div要素内の一番最初に配置
$('p').clone().insertBefore('div');
});
});
前章のサンプルで使っていたjQueryのコードです。
コピーするにはコピーしたいある要素のセレクタの後にclone()関数を記述します。
ボタンをクリックしたらの関数内でpタグをコピーし、.insertBefore()関数で、あるdiv要素内の一番最初にコピーしたpタグを配置しています。
以上で完了です。insertBefore()関数の部分を任意の配置に移動する関数に書き換えて使ってみましょう。
まとめ
アクションがあったらコピーする用途以外にも、ソースを単純にコピペできない状況の時、本記事で扱ったjQueryのclone()関数を使えばコピーできる場合もあります。
以上で解説を終わります。
目次