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

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

目次

関連記事

jQuery

開閉するアコーディオンリストがあり、一つ開いたら、他の開いていたのを閉じさせる方法

更新日:2022.09.09
3478
jQuery

CSSの「object-fit」をIEブラウザでも適用させる方法【簡単】

更新日:2022.09.09
301
jQuery

jQueryを使ってdivタグ、pタグ等のテキスト値を取得する方法

更新日:2022.09.09
461
jQuery

jQueryを使って簡単にタブ切り替えを実装してみよう

更新日:2022.09.09
185