Wrap element with specific code using jQuery
<p>I'm trying to wrap div with specific html code but I'm having problem using jQuery's <code>.before</code> and <code>.after</code> because jQuery would automatically close div I added into <code>.before</code>.</p>

<p>This is my html:</p>

<pre><code>&lt;div class="navigation"&gt;
    &lt;a&gt;first&lt;/a&gt;
    &lt;a&gt;second&lt;/a&gt;
    &lt;a&gt;third&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>When I try using this code:</p>

<pre><code>$('.navigation').before('&lt;div class="newNavigation"&gt;&lt;a&gt;Prev&lt;/a&gt;');
$('.navigation').after('&lt;a&gt;Next&lt;/a&gt;&lt;/div&gt;');
</code></pre>

<p>He will automatically close .newNavigation div, which is what I don't want to happen because I'm trying to close that div in <code>.after</code> code. Generated HTML looks like this:</p>

<pre><code>&lt;div class="newNavigation"&gt;
    &lt;a&gt;Prev&lt;/a&gt;
&lt;/div&gt;
&lt;div class="navigation"&gt;
    &lt;a&gt;first&lt;/a&gt;
    &lt;a&gt;second&lt;/a&gt;
    &lt;a&gt;third&lt;/a&gt;
&lt;/div&gt;
&lt;a&gt;Next&lt;/a&gt;
</code></pre>

<p>And I'm trying to get this:</p>

<pre><code>&lt;div class="newNavigation"&gt;
    &lt;a&gt;Prev&lt;/a&gt;
    &lt;div class="navigation"&gt;
        &lt;a&gt;first&lt;/a&gt;
        &lt;a&gt;second&lt;/a&gt;
        &lt;a&gt;third&lt;/a&gt;
    &lt;/div&gt;
    &lt;a&gt;Next&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>To help you little bit with this I created <a href="http://jsfiddle.net/Klikerko/GXYzV/" rel="nofollow">jsFiddle</a> where I unsuccessfully tried using <code>.before</code> and <code>.after</code>.</p>

<p>Thank you in advance!</p>

<p><strong>Solution:</strong></p>

<p>Although there was few good solutions I decided to go with @Andy-E suggestion because his code looks cleanest to me.</p>

<pre><code>$(".navigation")
    .wrap('&lt;div class="newNavigation"&gt;')
    .before("&lt;a&gt;Prev&lt;/a&gt;")
    .after("&lt;a&gt;Next&lt;/a&gt;");
</code></pre>

<p>Thank you all for participating!</p>
