jQuery: How can I wrap an element with a table (consisting of multiple rows)?
<p>The jQuery <a href="http://api.jquery.com/wrap/" rel="nofollow">.wrap()</a> function allows you to wrap any matched elements with some custom HTML. However, the function doesn't allow you to indicate where in the HTML you would like you matched element to be inserted -- <strong><em>it is always inserted into the inner most element</em></strong>.</p>

<p>I need to wrap a div with a fairly basic table (in order to add rounded corners to it), but the only catch is that the table has two rows and I want my element to appear in the second row. For example:</p>

<pre><code>$("#my-div").wrap('&lt;table&gt; \
                        &lt;tr&gt; \
                            &lt;td class="corner-topleft" colspan="2"&gt;&lt;/td&gt; \
                            &lt;td class="corner-topright"&gt;&lt;/td&gt; \
                        &lt;/tr&gt; \
                        &lt;tr&gt; \
                            &lt;td class="corner-bottomleft"&gt;&lt;/td&gt; \
                            &lt;td class="DIV-SHOULD-APPEAR-HERE"&gt;&lt;/td&gt; \
                            &lt;td class="corder-bottomright"&gt;&lt;/td&gt; \
                        &lt;/tr&gt; \
                    &lt;/table&gt;');
</code></pre>

<p>If you try to execute this script, the wrap() function automatically places the matched element inside the <strong>first table cell</strong> (i.e. "corner-topleft") as this is the "first inner most element".</p>

<p><em><strong>How can I use jQuery to wrap my element with the multi-row table above?</em></strong></p>
