jQuery: Chopping up ajax'ed HTML an then injecting it into the DOM
<p>I am loading some html from a remote source via the jQuery $.ajax() method.</p>

<p>Before I insert the html into the DOM, I want to chop it up into three pieces and insert each individual part into a particular area of my DOM.</p>

<p>For example, lets assume I load the following content via the $.ajax() function:</p>

<pre><code>&lt;div class='first'&gt;First&lt;/div&gt;
&lt;div class='second'&gt;Second&lt;/div&gt;
&lt;div class='third'&gt;Third&lt;/div&gt;
</code></pre>

<p>And want to insert it into this page connected to the DOM:</p>

<pre><code>&lt;div class='firstHome'&gt;Some content I want replaced.&lt;/div&gt;
&lt;div class='secondHome'&gt;More content to replace.&lt;/div&gt;
&lt;div class='thirdHome'&gt;Final location for content.&lt;/div&gt;
</code></pre>

<p>which would result in:</p>

<pre><code>&lt;div class='firstHome'&gt;&lt;div class='first'&gt;First&lt;/div&gt;&lt;/div&gt;
&lt;div class='secondHome'&gt;&lt;div class='second'&gt;Second&lt;/div&gt;&lt;/div&gt;
&lt;div class='thirdHome'&gt;&lt;div class='third'&gt;Third&lt;/div&gt;&lt;/div&gt;
</code></pre>

<p>How can I achieve that with jQuery?</p>
