JQuery :: How to copy contents of a div into another div?

In our previous article which was JQuery :: How to parse the JSON data received via ajax request? we discussed how to parse the JSON data which is received from the ajax request. Today we will like to discuss on how we can copy the contents of a div into another div.

Suppose you have the following HTML page:

<div id=”divTag”>

<img src=”images/doSomething.jpg”>

</div>

<div id=”divDuplicate”>

</div>

The div tag you want to copy is “divTag” and you want to copy it into “divDuplicate”. A div tag contents in jquery is accessed using the following command.

$(document).ready(function()

{

var divContents = $(“#divTag”).html();

}

You can now issue the following command to copy the div tag contents to a new div tag.

$(document).ready(function()

{

var divContents = $(“#divTag”).html();

$(“#divDuplicate”).html(divContents);

}

In the above JavaScript we using the jQuery copy contents of a div into a variable named divContents and than we are placing the contents of that variable into the new div.

In our next article we will explain how you can copy contents and place them in same div. Watch out for out jQuery tutorials everyday.

This is the easiest way to copy the contents of a div to another div via JQuery. All the rest intricacies are handled by JQuery itself.

We will keep updating our Jquery Tips section every 4 days, please subscribe to our feed and also share our articles on Facebook and Google Plus so other’s can benefit from our insight. Please feel free to send us your comments below, on how we can improve.