Clone <div> and change id

Question

How can I using javascript make clone of some <div> and set his id different from original. Jquery also will be nice.

Answer 1

var div = document.getElementById('div_id'),
    clone = div.cloneNode(true); // true means clone all childNodes and all event handlers
clone.id = "some_id";
document.body.appendChild(clone);

Answer 2

Use it:

JQuery

var clonedDiv = $('#yourDivId').clone();
clonedDiv.attr("id", "newId");
$('#yourDivId').after(cloneDiv);

Answer 3

I had the same problem. I've solved that by setting a counter and appending it to the ID. Hope it helps you too:

<script type="text/javascript">
     var counter = 1; //Set counter

function clone(sender, eventArgs) {
     var $row = $('#yourID');

     var $clone = $row.clone(); //Making the clone                      
     counter++; // +1 counter

     //Change the id of the cloned elements, append the counter onto the ID 
     $clone.find('[id]').each(function () { this.id += counter });
}
</script>

Answer 4

jQuery have method clone()

var original = $("#original");
var newClone = original.clone();