jQuery clone() example

jQuery clone() is used to create a copy of the matched elements. It also support a boolean parameter to indicate whether need to copy the event handlers and data along with the matched elements.

1. Clone the html elements

For example, you are going to clone the following html code.


 <div class="smallBox">
	I'm a small box
	<div class="smallInnerBox">I'm a small small inner box</div>
 </div>

Use clone() to create a copy of the above elements, and put the copied elements after the div tag that contains a class name of “smallBox”.


$('.smallBox').clone().insertAfter(".smallBox");

The result :


 <div class="smallBox">
	I'm a small box
	<div class="smallInnerBox">I'm a small small inner box</div>
 </div>
  <div class="smallBox">
	I'm a small box
	<div class="smallInnerBox">I'm a small small inner box</div>
 </div>

2. Clone the event handler

The next example will be cloning the button click event, you are going to copy the button that contains a id of ‘cloneButton1’.


<button id="cloneButton1">clone()</button>

<script type="text/javascript">
    $("#cloneButton1").click(function () {
		
	  $('.smallBox').clone().insertAfter(".smallBox");
	  
    });
</script>

If you are using the default clone() or clone(false) method, it will copy the button element only, but not the click() event handler.


$('#cloneButton1').clone().insertAfter("#cloneButton1");

To copy the click() event handler along with matched elements, you should use clone(true).


$('#cloneButton1').clone(true).insertAfter("#cloneButton1");

Try it yourself


<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">
	.smallBox{
		padding:8px;
		border:1px solid blue;
		margin:8px;
	}
	.smallInnerBox{
		padding:8px;
		border:1px solid green;
		margin:8px;
	}
</style>

</head>
<body>
  <h1>jQuery clone() example</h1>

  <div class="smallBox">
	I'm a small box
	<div class="smallInnerBox">I'm a small small inner box</div>
   </div>
  
  <p>
  <button id="cloneButton1">clone()</button>
  <button id="cloneButton2">clone() button (default)</button>
  <button id="cloneButton3">clone(true) button</button>
  <button id="reset">reset</button>
  </p>
  
<script type="text/javascript">
	
    $("#reset").click(function () {
	  location.reload();
    });
	
    $("#cloneButton1").click(function () {
		
	  $('.smallBox').clone().insertAfter(".smallBox");
	  
    });
	
    $("#cloneButton2").click(function () {
		
	  $('#cloneButton1').clone(false).insertAfter("#cloneButton1");
	  
    });
	
    $("#cloneButton3").click(function () {
		
	  $('#cloneButton1').clone(true).insertAfter("#cloneButton1");
	  
    });
	
</script>
</body>
</html>

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

Leave a Reply

avatar
newest oldest most voted
ramonhimera
Guest
ramonhimera

You dont have to do all of that binding/unbinding. The following seems to work ok for me…

var $lastItem = $(‘.smallBox’).last();
var $newItem = $lastItem.clone();
$newItem.insertAfter($lastItem);

Best Fiverr Clone Script
Guest
Best Fiverr Clone Script

I have been surfing online greater than 3 hours lately, but I by no means found any interesting article like yours. It is lovely price enough for me. In my opinion, if all web owners and bloggers made excellent content as you did, the web will probably be a lot more helpful than ever before.

Sourav Basak
Guest
Sourav Basak

The jQuery clone() Method creates a deep run time copy of set of matched DOM Elements to another location in the DOM elements and select the clones.

$(selector).clone(true|false)

Example of jQuery clone():

This is a first paragraph.

$(document).ready(function(){
$(“p”).clone().appendTo(“body”);
});

For more information:
http://www.namasteui.com/jquery-clone-method/

Ashish
Guest
Ashish

I want to create the number of clone of small box as per value supplied by input type=number.How to do it?

Yogesh
Guest
Yogesh

its creating 6 clones on 2nd click . please give solution..

Guest
Guest
Guest

Good

Nerd
Guest
Nerd

The problem is the i should do it for a website control panel, and to update the database with ajax every single item i duplicate…

David
Guest
David

Keep in mind, sometimes you need to use removeAttr(‘id’) when cloning and element. Personally, I always include it for uniform best practice sake and maintainability.

moonhuby
Guest
moonhuby

Is it possible to clone via text input. For example I enter 3 number in text input and using onchange, it clones 3 times.

vishal
Guest
vishal

jQuery clone() example

One problem with that

next clone() clicks it makes multiple of previous boxes

But our need to make clone one one that means one box cloned one time on click

vishal
Guest
vishal

It help in my project

but i need above mention condition

Jimmy
Guest
Jimmy

I think the problem lies with the the fact that jquery is cloning An element say with class=”clone1″ the first time. Then when the button is clicked a second time it is cloning two class=”clone1″ so you end up with four elements instead of three.

My work around was to remove the class after cloning and the add the class back to the last child element. So it would look something like this:

$(“.cloneButton2”).click(function(){
$(‘.cloneButton1’).clone().insertAfter(“.cloneButton1”);
$(‘#contacting div’).removeClass(“cloneButton1”);
$(“#contacting div:nth-last-child(2)”).addClass(“cloneButton1”);
});

Hope this helps.

bassam essawi
Guest
bassam essawi

you can use

$("#cloneButton3").unbind().bind('click',function(){
     $('#cloneButton1').clone(true).insertAfter("#cloneButton1");
     $("#cloneButton1").unbind().bind('click',function(){
 	  $('.smallBox').clone().insertAfter(".smallBox");
     });
});
bassam essawi
Guest
bassam essawi

delete first unbind.bind :)

 
$("#cloneButton3").click(function(){
     $('#cloneButton1').clone(true).insertAfter("#cloneButton1");
     $("#cloneButton1").unbind().bind('click',function(){
 	  $('.smallBox').clone().insertAfter(".smallBox");
     });
});
 
sana
Guest
sana

very nice example. helped me a lot.
Can we limit the cloning process for example – we can clone at most 3 times? after that clone button disappears.
i m new to jquery.

Sana

Manoj Rathore
Guest
Manoj Rathore

Its good but i want only one one div cloning and its creating multiple divs cloning i want one by one………………

srk_aus
Guest
srk_aus

there is a problem in the code as when u click the clone button for the first time it generates the box (which is ok.), but when it is clicked second time the code generates few more other box’s (at-least more than couple) rather it should generate 1-by-1.

cheers…

paul
Guest
paul

thanks for this. the jquery website doesnt mention clone(true) all that visibly, but this gave me the hint i needed to finish my mini project :)