How can I wrap the entire page contents in a div using jquery

Question

Here is my code.

$(function(){
    $("body").prepend('<div id="loading"><span id="pagename"></span></div><div id="fade_wrapper">');
    $("body").append('</div> <!-- closing #fade_wrapper -->');
});

The problem is that chrome auto closes the open <div id="fade_wrapper"> so that the HTML looks like this:

<div id="loading"><span id="pagename"></span></div><div id="fade_wrapper"></div>

That closing DIV in the second code shouldn't be there. How can I wrap the entire page contents in a div using jquery?

Answer 1

Use .wrapInner :

$("body").wrapInner('<div id="loading"...');

append and prepend don't work that way. You prepend/append nodes , not tags .

It seems like you want to prepend some separate HTML as well. No matter:

$("body").wrapInner('<div id="fade_wrapper">');
$("body").prepend('<div id="loading"><span id="pagename"></span></div>');

The .prepend is done second so that it will be outside of the wrapping.