The jQuery API .contents() method will retrieve all children of the specified element or elements. This content includes all "text nodes" and HTML elements which means that it retreives the tags and formating of the parent element specified.

The .contents() method is sometime used to retrieve contents from the element, modify the contents, then return it to the original element.

The .contents() method does not accept any arguments, it simple returns the contents of the specified element.

The .contents() method is often used to style contents of an iframe, if it is from the same domain as the webpage.

The jQuery API .contents() method is similar to .children(), but .children() does not return the comment nodes.

 

Example of the .contents() method

This example will grab all of the contents of the selector, #textBox and move all of its children elements to the box #quotebox. The <div id="quoteBox"> has different styling.

$("#moveText").click(function(){
    var loadText = $("#textArea").contents();
    $("#quoteBox").html(loadText);
});

Here is the HTML:

<div id="textArea">
<p>The appearance of the island when I came on deck next morning was altogether changed. Although the breeze had now utterly ceased, we had made a great deal of way during the night and were now lying becalmed about half a mile to the south-east of the low eastern coast.</p>
<p>Grey-coloured woods covered a large part of the surface. This even tint was indeed broken up by streaks of yellow sand-break in the lower lands, and by many tall trees of the pine family, out-topping the others--some singly, some in clumps; but the general colouring was uniform and sad.</p>
</div>
<div id="quoteBox">
</div>
<button id="moveText">MOVE TEXT</button>

Here is the result: