How can I duplicate a div onclick event?

by

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

More Related Contents:

  1. Fastest way to duplicate an array in JavaScript – slice vs. ‘for’ loop
  2. Switch classes on click of button
  3. Java script on focus instead of onclick
  4. HTML text input allow only numeric input
  5. How to make JavaScript execute after page load?
  6. Frame Buster Buster … buster code needed
  7. How do I programmatically set the value of a select box element using JavaScript?
  8. How can I change an element’s text without changing its child elements?
  9. How to correctly iterate through getElementsByClassName
  10. Appending HTML string to the DOM
  11. Persisting the changes of range objects after selection in HTML
  12. Return HTML content as a string, given URL. Javascript Function
  13. Javascript Confirm popup Yes, No button instead of OK and Cancel
  14. Show and hide divs at a specific time interval using jQuery
  15. Sound effects in JavaScript / HTML5
  16. How do I detect “shift+enter” and generate a new line in Textarea?
  17. Want to add “addEventListener” on multiple elements with same class [duplicate]
  18. How to prevent “The play() request was interrupted by a call to pause()” error?
  19. HTML5 Local Storage fallback solutions [closed]
  20. How to get value of a div using javascript
  21. adding multiple event listeners to one element
  22. Why don’t audio and video events bubble?
  23. HTML5 Audio tag on Safari has a delay
  24. How can I add “href” attribute to a link dynamically using JavaScript?
  25. Cannot use import statement outside a module
  26. Silent print an embedded PDF
  27. Search and Highlight in jQuery
  28. Set / Copy javascript computed style from one element to another
  29. Is there a way to get a element to link to a location without wrapping it in an
  30. New Webkits convert decimal comma to ~ dot and vice versa in number-type inputs. Javascript name of that browser feature?

Leave a Comment