JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<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>

CSS

.fooSibling {
    color: green;
}

JavaScript

$('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);
});