Prepending unclosed tags in jquery

Question

Due to some limitations on the place files are being placed I would like to prepend and append page structure just after the opening body tag and just before the closing body tag.

<script type="text/javascript">
$(document).ready(function() {
$('body').prepend('<div id="header"><div id="title"></div></div><div id="wrapper"><div id="content">'); 
$('body').append('</div></div><div id="footer"></div>'); 
return false;  
});
</script>

My code does this, but it also closes all of my open div tags when using prepend. And append removes all tags that to is appear to be closing nothing.

Is this just a poor way to do what I am trying to do? Can I tell jQuery to top "fixing" my html for me? Is the browser what is fixing my tags and not jQuery?

Answer 1

Use .wrapInner() for this:

$(function() {
  $('body').wrapInner('<div id="wrapper"><div id="content"></div></div>');
  $('body').prepend('<div id="header"><div id="title"></div></div>'); 
  $('body').append('<div id="footer"></div>');
});