Wrap a mixed set of text nodes and HTML elements with JavaScript / jQuery
<p>I have this HTML</p>

<pre><code>&lt;div class="box"&gt;
    &lt;a href="#goals"&gt; | &lt;a href="#rules"&gt; | &lt;a href="#controls"&gt;
    &lt;p&gt;&lt;a name="goals"&gt;&lt;/a&gt;&lt;/p&gt;
    &lt;h2&gt;Goals&lt;/h2&gt;
    ... yada yada
</code></pre>

<p>and want it like this.</p>

<pre><code>&lt;div id="nav"&gt;
    &lt;a href="#goals"&gt; | &lt;a href="#rules"&gt; | &lt;a href="#controls"&gt;
&lt;/div&gt;
</code></pre>

<p>JQuery have wrapAll(), but I can only select the links so the "|" gets left outside the div.</p>

<p>before('div') and after('div') creates a closed element, like <code>&lt;div&gt;&lt;/div&gt;</code> so what to do?</p>

<p>I'm using</p>

<pre><code>$('.box a[href^="#"]')
</code></pre>

<p>to select the links. They are part of a text resource file, so I cant edit anything.</p>
