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

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

Ads

関連記事

JavaScript

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

更新日:2020.10.20
67
JavaScript プログラミング

【簡単】slickスライダーでデバイス事にオプションを切り替えよう【レスポンシブ設定を追加】

2022.04.07
69
JavaScript プログラミング

jQueryを使って、checkしたinput要素の label値を取得する方法

2022.01.12
638
プログラミング

多種・多様なスクロールアニメーションを実装するならAnimate.css!使い方を解説

2022.04.27
117