How can I duplicate a div onclick event?

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

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

JAVASCRIPT

function duplicate() { var div = duplicate("div");     div.id = "duplicater"; div.appendChild(duplicate("duplicater")); } 

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:

<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