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>
Tags :

About the Author

mkyong
Founder of Mkyong.com and HostingCompass.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

  • Pingback: water ionizer plans()

  • Pingback: alkaline water brands()

  • Pingback: alkaline water()

  • Pingback: car parking()

  • Pingback: hurtigt laan penge nu()

  • Pingback: mp4 mobile porn()

  • Pingback: stop parking()

  • Pingback: INCREASELEPTIN.COM()

  • Pingback: Blue Coaster33()

  • http://www.thenerdcorner.it 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

    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

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

  • http://bestfiverrclone.com/feed/ 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.

  • http://vrdvishwas.weebly.com 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

    • http://vrdvishwas.weebly.com vishal

      It help in my project

      but i need above mention condition

      • http://jameskeogh.com 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.

    • http://urorbit.com bassam essawi

      you can use

      $(&quot;#cloneButton3&quot;).unbind().bind('click',function(){
           $('#cloneButton1').clone(true).insertAfter(&quot;#cloneButton1&quot;);
           $(&quot;#cloneButton1&quot;).unbind().bind('click',function(){
       	  $('.smallBox').clone().insertAfter(&quot;.smallBox&quot;);
           });
      });
      • http://urorbit.com bassam essawi

        delete first unbind.bind :)

        $(&quot;#cloneButton3&quot;).click(function(){
             $('#cloneButton1').clone(true).insertAfter(&quot;#cloneButton1&quot;);
             $(&quot;#cloneButton1&quot;).unbind().bind('click',function(){
         	  $('.smallBox').clone().insertAfter(&quot;.smallBox&quot;);
             });
        });
  • 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

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

  • 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

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

    • http://www.mkyong.com mkyong

      Good to know it help, remember send me your mini project for viewing if possible :)

      • http://urorbit.com Bassam Essa

        can i send to you my big project ?