jQuery - wrap( html ) Method(before method adds unexpected close tags)

Problem:

I have a table in my markup on which I want to add some divs before and efter like this: <div class="widebox"> <div class="widebox-header">Opret/rediger bruger</div> <div class="widebox-middle"> <table id="Table3"></table> </div> <div class="widebox-bottom"></div> </div> I'm trying to do this with jQuery, like this: $('#Table3').before('<div class="widebox"><div class="widebox-header">Opret/rediger bruger</div><div class="widebox-middle">'); $('#Table3').after('</div><div class="widebox-bottom"></div></div>'); However this is what renders out, the method seems to close my opening divs: <div class="widebox">     <div class="widebox-header">Opret/rediger bruger</div>     <div class="widebox-middle"></div></div><!-- unexpected close divs -->     <table id="Table3"></table> <div class="widebox-bottom"></div>

I have a table in my markup on which I want to add some divs before and efter like this: <div class="widebox"> <div class="widebox-header">Opret/rediger bruger</div> <div class="widebox-middle"> <table id="Table3"></table> </div> <div class="widebox-bottom"></div> </div> I'm trying to do this with jQuery, like this: $('#Table3').before('<div class="widebox"><div class="widebox-header">Opret/rediger bruger</div><div class="widebox-middle">'); $('#Table3').after('</div><div class="widebox-bottom"></div></div>'); However this is what renders out, the method seems to close my opening divs: <div class="widebox">     <div class="widebox-header">Opret/rediger bruger</div>     <div class="widebox-middle"></div></div><!-- unexpected close divs -->     <table id="Table3"></table> <div class="widebox-bottom"></div>

Solution:

.before() and .after() insert elements, not strings. An unclosed <div> is not a complete element, so it's automatically closed. What you want is to use the .wrap() function to wrap your new<div> around the table. E.g.:

$('#Table3').wrap('<div class="widebox-middle" />');

Explanation:

The .before and .after methods need to describe a fully defined part of the DOM tree - that is, each call must contain both opening and closing tags - these methods add elements, not raw html, so any malformed/incomplete html you pass in with any one statement will be converted to something valid...

Check out the .wrap() method - this is what you need

http://api.jquery.com/wrap/