get the html of a div and inject it beside another div
<p>I have an HTML structure in this format:</p>

<pre><code>&lt;div class="wrap"&gt;
    &lt;div class="name"&gt;&lt;/div&gt;
    &lt;div class="content"&gt;
        &lt;div class="sub"&gt;123&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="wrap"&gt;
    &lt;div class="name"&gt;&lt;/div&gt;
    &lt;div class="content"&gt;
        &lt;div class="sub"&gt;abc&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="wrap"&gt;
    &lt;div class="name"&gt;&lt;/div&gt;
    &lt;div class="content"&gt;
        &lt;div class="sub"&gt;foo&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>As you can see above, I have 3 equal <code>div</code> elements, each with a different <code>.sub</code> div.
How can I get the HTML content of <code>.sub</code> div and put it NEXT TO <code>.name</code> div using jQuery when document is ready?</p>

<p>The results will  be like:</p>

<pre><code>&lt;div class="wrap"&gt;
    &lt;div class="name"&gt;&lt;/div&gt;
    &lt;div class="sub"&gt;123&lt;/div&gt;
    &lt;div class="content"&gt;
        &lt;div class="sub"&gt;123&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="wrap"&gt;
    &lt;div class="name"&gt;&lt;/div&gt;
    &lt;div class="sub"&gt;abc&lt;/div&gt;
    &lt;div class="content"&gt;
        &lt;div class="sub"&gt;abc&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="wrap"&gt;
    &lt;div class="name"&gt;&lt;/div&gt;
    &lt;div class="sub"&gt;foo&lt;/div&gt;
    &lt;div class="content"&gt;
        &lt;div class="sub"&gt;foo&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
