Main Tutorials

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 Author

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

Comments

Subscribe
Notify of
23 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
uma
5 years ago

im using clone method for rows made of div tag while making calculations my parent row working correctly but in child row the calculated value is showing in my parent textbox. eventhough i changed clone index values and event true to my clone.

ramonhimera
9 years ago

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);

David
11 years ago

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.

Althaf
2 years ago

Is there a way we can clone a div and its contents just like we do on the same page and save it some kinda database, retrieve it on another page and append to another div in the new page?

What I am trying to do:
Create dynamically textboxes which user inputs values to, something like steps of a process(each textbox each task of the process).

Save these elements and values in a database.

When a user wants to view the created process in another page, show the textboxes with the values.

Any help is much appreciated

sneha
5 years ago

nice this one ,
but i have some different problem
i have maine row and it eliment i.e drop down list ,textbox and button

after clone this mainrow to $newRow
i need to get value from this $newRow txetbox and use it
how i get this value

Sourav Basak
8 years ago

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
8 years ago

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

Yogesh
9 years ago

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

Guest
10 years ago

Good

Nerd
10 years ago

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…

moonhuby
11 years ago

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

Best Fiverr Clone Script
11 years ago

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.

vishal
11 years ago

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

bassam essawi
11 years ago
Reply to  vishal

you can use

$("#cloneButton3").unbind().bind('click',function(){
     $('#cloneButton1').clone(true).insertAfter("#cloneButton1");
     $("#cloneButton1").unbind().bind('click',function(){
 	  $('.smallBox').clone().insertAfter(".smallBox");
     });
});
bassam essawi
11 years ago
Reply to  bassam essawi

delete first unbind.bind 🙂

 
$("#cloneButton3").click(function(){
     $('#cloneButton1').clone(true).insertAfter("#cloneButton1");
     $("#cloneButton1").unbind().bind('click',function(){
 	  $('.smallBox').clone().insertAfter(".smallBox");
     });
});
 
vishal
11 years ago
Reply to  vishal

It help in my project

but i need above mention condition

Jimmy
10 years ago
Reply to  vishal

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.

sana
11 years ago

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
12 years ago

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

srk_aus
12 years ago

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
13 years ago

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 🙂

Bassam Essa
10 years ago
Reply to  mkyong

can i send to you my big project ?