javascript - 在 JavaScript/jQuery 中将元素包裹在两个元素之间？

Question

如何创建一个将内容包装在两个元素之间的元素？

这是我正在处理的代码的简化示例:

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

我希望将第一个跨度的末尾和第二个跨度的开头之间的所有文本包装在 div 中，以便我可以对文本进行不同的着色。

这样的事情可能吗？如果没有，有什么聪明的方法可以解决这个问题吗？

编辑:我不完全确定我希望代码最终看起来如何。我只关心结果，即我能够对跨度之间的文本应用特定的样式，尽管它们有不同的父级。例如，如果我什至可以设置文本并在其周围添加边框，那就太好了，这样最终结果看起来像这样:

一些文字一些文字一些更多文字

------------------------------
|additional text              |
|I am bad at coming up with   |
-----------------------------

假文本，我应该在某个地方查找 lorem ipsum 。

Answer 1

这可怕，但这是我能想到的最好的:

$('p').each(function(i){
    var that = $(this),
        foo = that.find('.foo');
    if (i==0){
        var tN = foo[0].nextSibling;
        $('<span />',{class : 'fooSibling', text: tN.nodeValue}).insertAfter(foo);
    }
    else if (i==1){
        var tN = foo[0].previousSibling;
        console.log(tN,tN.nodeValue);
        $('<span />',{class : 'fooSibling', text: tN.nodeValue}).insertBefore(foo);
    }
    this.removeChild(tN);
});

JS Fiddle demo .

略有改进，并且稍微不那么可怕:

$('p').each(function(){
    var that = $(this),
        foo = that.find('.foo');
    if (that.next().find('.foo').length){
        $(foo[0].nextSibling).wrap('<span class="fooSibling"></span>')
    }
    else if (that.prev().find('.foo').length) {
        $(foo[0].previousSibling).wrap('<span class="fooSibling"></span>')
    }
});

JS Fiddle demo .