Add ending tag and start tag
<p>I have a table:</p>

<pre><code>&lt;div id="menu"&gt;
    &lt;table cellspacing="0" cellpadding="0" width="930"&gt;
        &lt;tbody&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    1
                &lt;/td&gt;
                &lt;td class="spacer"&gt;&lt;/td&gt;
                &lt;td&gt;
                    2
                &lt;/td&gt;
                &lt;td class="spacer"&gt;&lt;/td&gt;
                &lt;td&gt;
                    3
                &lt;/td&gt;
                &lt;td class="spacer"&gt;&lt;/td&gt;
                &lt;td&gt;
                    4
                &lt;/td&gt;
                &lt;td class="spacer"&gt;&lt;/td&gt;
                &lt;td&gt;
                    6
                &lt;/td&gt;
                &lt;td class="spacer"&gt;&lt;/td&gt;
                &lt;td&gt;
                    5
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;
</code></pre>

<p>And I need to split this table into two tables.<br>
Like this:</p>

<pre><code>&lt;div id="menu"&gt;
    &lt;table cellspacing="0" cellpadding="0" width="930"&gt;
        &lt;tbody&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    1
                &lt;/td&gt;
                &lt;td class="spacer"&gt;&lt;/td&gt;
                &lt;td&gt;
                    2
                &lt;/td&gt;
                &lt;td class="spacer"&gt;&lt;/td&gt;
                &lt;td&gt;
                    3
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
    &lt;table&gt;
        &lt;tbody&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    4
                &lt;/td&gt;
                &lt;td class="spacer"&gt;&lt;/td&gt;
                &lt;td&gt;
                    6
                &lt;/td&gt;
                &lt;td class="spacer"&gt;&lt;/td&gt;
                &lt;td&gt;
                    5
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;
</code></pre>

<p>So I did this:<br>
It finds the middle spacer and replaces that with some ending tags and start tags.</p>

<pre><code>var menuItems = jQuery('#menu table tr td.spacer').size();
var middle = Math.floor(menuItems/2);
jQuery('#menu table tr').children('td.spacer').each(function(index) {
    if(index == middle) {
        jQuery(this).replaceWith('&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;table&gt;&lt;tbody&gt;&lt;tr&gt;');
    }
});
</code></pre>

<p>But jQuery doesn't seem to like that... Is it possible to do this? Split an element?</p>
