Insert <span> in <p> element

Question

I got like;

<p>Variable Text</p>

And I want to it to be;

<p>Variable <span>Text</span></p>

Is this possible by a javascript function? / or jQuery.

Oh yeah, and the p-element got an ID and the text inside the p-element is variable but always consists of 2 words. I want a span around the last word of the text by a javascript function.

Answer 1

Try this

var txt = "Hello bye";
var dataArr = txt.split(' ');

var paragraph = document.getElementById("pid");
paragraph.innerHTML = dataArr[0]+ " <span>"+dataArr[1]+"</span>";

Here is a demo