How can I duplicate a div onclick event?

javascript html copy duplicates

81,979

You are creating an infinite recursion!

function duplicate()
{
    var div = duplicate("div");

The function is calling itself over and over again. Use cloneNode():

HTML:

<div id="duplicater0"> 
duplicate EVERYTHING INSIDE THIS DIV
</div>

JavaScript:

var i = 0;

function duplicate() {
    var original = document.getElementById('duplicater' + i);
    var clone = original.cloneNode(true); // "deep" clone
   clone.id = "duplicater" + ++i; // there can only be one element with an ID
    clone.onclick = duplicate; // event handlers are not cloned
    original.parentNode.appendChild(clone);
}

Working DEMO

Or without IDs:

function duplicate() {
    var clone = this.cloneNode(true); // "deep" clone
    clone.id = ""; // there can only be one element with an ID
    clone.onclick = duplicate; // event handlers are not cloned
    this.parentNode.appendChild(clone);
}

Update:

If you want to clone the div on button click, you can use a slightly different version:

HTML:

<button id="button" onclick="duplicate()">Click me</button>
<div id="duplicater"> 
    duplicate EVERYTHING INSIDE THIS DIV
</div>

JavaScript:

var i = 0;
var original = document.getElementById('duplicater');

function duplicate() {
    var clone = original.cloneNode(true); // "deep" clone
    clone.id = "duplicater" + ++i;
    // or clone.id = ""; if the divs don't need an ID
    original.parentNode.appendChild(clone);
}

If you are not in a form, you should use <button> instead of <input type="button">.

Working DEMO 2

81,979

Opoe

Updated on July 09, 2022

Comments

Opoe almost 2 years
I want a div to be duplicated when a button is clicked. I though something like this; but it's not working. Can anyone help me?

HTML
```
<div id="duplicater"> 
duplicate EVERYTHING INSIDE THIS DIV
</div>
```
JAVASCRIPT
```
function duplicate()
{
var div = duplicate("div");
    div.id = "duplicater";
div.appendChild(duplicate("duplicater"));
}
```
- Jordi over 13 years
  
  Do you want to duplicate the div (and end up with two divs), or duplicate what is inside the div?
- nickf over 13 years
  
  I feel like a bit of a broken record saying this, but ids must be unique. You shouldn't have two elements with id="duplicater" on the same page.
- Opoe over 13 years
  
  that makes sense! i'll add a counter
- Quentin over 13 years
  
  Don't add a counter. Just keep a reference to the created element in JS (possibly storing them in an array).
Opoe over 13 years

Wow thanks a lot, it only works once though! And can i add a button like this? <input type="button" value="Click here" onclick="duplicate()">
Opoe over 13 years

Thank you so much! You realy helped me out here :)
Felix Kling over 13 years

You should add that you are using jQuery.
eshellborn over 10 years

Ok, this works well, but it doesn't work unless I put the javascript at the end of the <body>. Why is that? I have an external javascript file loaded in the <head> that doesn't work, so I'm going to have to make some changes.
Felix Kling over 10 years

@eshellborn: It seems you are trying to access an element before it exists! Have a look at this question: stackoverflow.com/questions/14028959/….
eshellborn over 10 years

Ok thanks. That makes sense to me, but for all other things, my script works in the head, even calling specific elements that "haven't been created yet." So why is it different for this case?
Felix Kling over 10 years

@eshellborn: I don't think you are doing that, because it's simply impossible. Maybe you put the code in the header but the access is inside some callback. Without knowing the actual code I cannot say more though ;)
eshellborn over 10 years

Is it because I'm calling the functions after the whole page has loaded? Take I look at this: goo.gl/m7D4w0, that's kind of what I'm talking about.
Felix Kling over 10 years

@eshellborn: Yes, exactly. Even though you are putting the code in the header, the DOM access only happens when the function is executed, which is after the DOM was loaded. If you move the document.getElementById call before the function, the DOM access would happen when the script tag gets evaluated and would result in an error.
eshellborn over 10 years

Ok thanks for explaining. So as a developer is it good practice to always put the script tag at the end of the <body>?
JakeCowton over 9 years

Nice addition to increment the id numbers
Dilara Albayrak over 7 years

Hi, your code seems helpful, thanks. However, i'm getting " Cannot read property 'cloneNode' of undefined." error. Do you know how i can handle that(i couldn't find a lot about that on the Internet)?
Felix Kling over 7 years

@DilaraAlbayrak: That means that whatever you are calling cloneNode on isn't a DOM element. So either the DOM element you are searching for doesn't exist or it doesn't exist at the moment you are looking for it, or you are using the DOM API incorrectly. Maybe this helps: stackoverflow.com/q/14028959/218196 .
snow over 5 years

upvoted for adding event handlers on the cloned elements.