How can i duplicate a div onclick with javascript?

Question

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

Answer 1

You are creating an infinite recursion!

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

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

HTML:

 
duplicate EVERYTHING INSIDE THIS 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:

Click me
 
    duplicate EVERYTHING INSIDE THIS 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 instead of .

Working DEMO 2