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

【簡単】JQueryを使ってカテゴリー毎に出し分けれる簡易検索フォームを作る方法

更新日:2022.09.09
2607
jQuery

htmlのselectボックスを使って選択したoptionにリンクさせる方法【jQuery】

更新日:2022.09.09
5855
jQuery

jQueryを使ってURLにアンカーを残さず、ページ内リンクさせる方法

更新日:2022.09.09
5561
jQuery

【簡単】横並びブロック要素の高さを揃えるにはmatchHeight.jsを使おう

更新日:2022.09.09
1370