jquery: Paste a set of elements over another set of elements / merging elements
<p>I have 2 sets of elements:</p>

<pre><code>&lt;div class='container container1'&gt;
    &lt;div class='colors'&gt;
        &lt;div class='blue'&gt;&lt;/div&gt;
        &lt;div class='red'&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class='drinks'&gt;
        &lt;div class='soda'&gt;coke&lt;/div&gt;
        &lt;div class='juice'&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;    

&lt;div class='container container2'&gt;
    &lt;div class='cars'&gt;
        &lt;div class='sedans'&gt;&lt;/div&gt;
        &lt;div class='vans'&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class='drinks'&gt;
        &lt;div class='soda'&gt;mountain dew&lt;/div&gt;
        &lt;div class='coffee'&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;        
</code></pre>

<p>I want to paste container1 over container2 such that any replacements are over written and any uniques to each container are put left alone and put together.</p>

<p>The result should be:</p>

<pre><code>&lt;div class='container container-result'&gt;
    &lt;div class='colors'&gt;
        &lt;div class='blue'&gt;&lt;/div&gt;
        &lt;div class='red'&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class='cars'&gt;
        &lt;div class='sedans'&gt;&lt;/div&gt;
        &lt;div class='vans'&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class='drinks'&gt;
        &lt;div class='soda'&gt;coke&lt;/div&gt;
        &lt;div class='juice'&gt;&lt;/div&gt;
        &lt;div class='coffee'&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;        
</code></pre>

<p>The elements can have any arbitrary hierarchy / depth. What's the best way to do this?</p>

<p>Thanks in advance.</p>
