Written by Kasumi

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()関数を使えばコピーできる場合もあります。

以上で解説を終わります。

目次

関連記事

HTMLCSS jQuery

【CSS】高さ100vh指定時のスマホステータスバーを除く方法

更新日:2022.09.09
2598
jQuery

【jQuery】背景に波紋アニメーションを実装する方法

2023.08.28
1001
jQuery

jQuery UI Datepickerで本日を基準に過去を非選択。選択可能日を設定する方法

2023.10.02
711
jQuery

jqueryを使って、パラメーターを追加・付与し、条件分岐する方法

更新日:2022.09.09
4057