html - How to duplicate a div in JavaScript

Question

I was wondering how I can duplicate a DIV element a few times through JavaScript without duplicating the DIV in my html code?

Answer 1

Let's assume the you selected the div doing something like:

var myDiv = document.getElementById("myDivId");

The DOM API contains a cloneNode method which you can use

var divClone = myDiv.cloneNode(true); // the true is for deep cloning

Now you can add it to the document

document.body.appendChild(divClone);

Here is a short self contained code example illustrating this