JQuery selected text node but cannot preform any css function on it
<p>This is the text:</p>

<pre><code>&lt;div id="wrapper1"&gt;Welcome to our website&lt;span class="inner"&gt;, &lt;/span&gt;Bud!&lt;/div&gt;
</code></pre>

<p>So after selecting <strong>"bud!"</strong> with:</p>

<pre><code>var elementOne = $('#wrapper1')[0].childNodes[2].nodeValue;
</code></pre>

<p>When I do <code>elementOne.css("color", "red");</code> I am getting an error of:</p>

<blockquote>
  <p>Uncaught TypeError: elementOne.css is not a function</p>
</blockquote>

<p>How can I preform css on this variable?</p>

<blockquote>
  <p><strong>EDIT:</strong> Please note that I am not interested to add a span and this was given to me by someone as a quiz test and there is a way to preform this <strong>without adding the span</strong></p>
</blockquote>

<p>trying with wrap, offered by great Scott (he gave me a link to the Jquery wrap function)</p>

<blockquote>
  <p>TRIAL:
  tried with this:</p>
</blockquote>

<pre><code>var elementTwo = $('#wrapper1');
elementTwo.html(elementTwo.text().replace(/(\w+?)$/, '&lt;span style="color: red;"&gt;$2&lt;/span&gt;'));
</code></pre>

<p>still not working.</p>