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>

Anyone know what could be causing this?