Need to remove table from DOM, and place Body into a td and put table back into DOM

Question

Ok, if you go here: http://devs.dream-portal.net/smf205/index.php?action=forum

You will notice a table element that contains (under the menu) a forum (board index) on the right and 2 blocks of content on the left. All of this is within a table element with the class dp_main on the table element. On the right is SMF content and here's where it gets tricky. Ok, this td element has an id of smf_col I need to take out ALL HTML from within the #smf_col td element and place it just before (or in the same spot in the DOM) the table element is. Than I need to remove the table element .dp_main altogether from the DOM (and all of it's contents), than place all contents from within the body tag into the EMPTY #smf_col td element of the table, and than put that table into the body tag.

I can only do this in the body tag, so that's why the table needs to be removed from the DOM and placed back into it once the entire body contents gets placed into the td element with id = smf_col.

Using the following jQuery (a lot of manipulating here, because I can only do this in the body tag):

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {

    var $smf_content = $("#smf_col").contents();
    $("#smf_col").empty();

    $($smf_content).insertBefore($(".dp_main"));

    var $dptable = $(".dp_main").contents();
    $(".dp_main").remove();

    var $body = $("body").contents();
    $("body").empty();
    $("body").html($dptable);
    $("#smf_col").html($body);
});

</script>

The page is here: http://devs.dream-portal.net/smf205/index.php?action=forum

I will disable my code for now, since it doesn't work anyways, and leave it in it's original state so you can see exactly what I am talking about, before manipulating anything, this is what I have to work with. Basically, this this is done properly, the 2 blocks on the left should be ALL the way to the left and the rest of the page should be on the right.

Final Result should look something like the image below:

Answer 1

Try

var $dpmain = jQuery('.dp_main');
var $body = jQuery('body');
var $col = jQuery('#smf_col');

var $ct = jQuery('<div />').insertBefore($dpmain);
$body.append($dpmain);

$col.contents().appendTo($ct);
$body.contents().not($dpmain).appendTo($col)