convert html structure using jquery
<p>Any idea how to convert the html structure from this:</p>

<pre><code>&lt;div class="menu"&gt;
    &lt;ul&gt;
        &lt;li&gt;
            &lt;a href="#"&gt;Fruit A&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;Category 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Category 2&lt;/a&gt;&lt;/li&gt;                              
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;a href="#"&gt;Fruit B&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;Category 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Category 2&lt;/a&gt;&lt;/li&gt;                             
            &lt;/ul&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>to the following using jQuery:</p>

<pre><code>&lt;div class="menu"&gt;
    &lt;div&gt;
        &lt;h3&gt;&lt;a href="#"&gt;Fruit A&lt;/a&gt;&lt;/h3&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Category 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Category 2&lt;/a&gt;&lt;/li&gt;                             
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div&gt;
        &lt;h3&gt;&lt;a href="#"&gt;Fruit B&lt;/a&gt;&lt;/h3&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Category 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Category 2&lt;/a&gt;&lt;/li&gt;                            
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I have tried with <a href="http://api.jquery.com/replaceWith/" rel="nofollow"><code>.replaceWith()</code></a> but no luck. Please help.</p>
