Wrap element between two elements in JavaScript/jQuery?
<p>How can one create an element that wraps the content between two elements?</p>

<p>Here's a simplified example of the code I'm dealing with:</p>

<pre><code>&lt;p&gt;
Some text some text &lt;span class="foo"&gt;some more text&lt;/span&gt; additional text.
&lt;/p&gt;
&lt;p&gt;
I am bad at coming up with &lt;span class="foo"&gt;fake text&lt;/span&gt;, I should have looked it up lorem ipsum somewhere.
&lt;/p&gt;
</code></pre>

<p>What I would like is that all the text between the end of the first span and the beginning of the second span to be wrapped in a div so that I can, for example, color the text  differently.</p>

<p>Is such a thing possible?  If not, are there any clever ways around this?</p>

<p>EDIT: 
I'm not entirely sure how I'd like the code to look at the end of the day. I only care about the result, which is that I'm able to apply specific styling to the text between the spans despite the fact that they have different parents. It would be really great if I could, for example, even set out the text and put a border around it, so that the end result looks something like:</p>

<p>Some text some text some more text</p>

<pre><code>------------------------------
|additional text              |
|I am bad at coming up with   |
-----------------------------
</code></pre>

<p>fake text, I should have should have looked up lorem ipsum somewhere.</p>
