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

Answer 2

It's possible (the following assumes the p has an ID, like you said), in it's simplest form you can just do:

var paragraph = document.getElementById("pId");
paragraph.innerHTML = "Hello <span>World</span>";

Or if you want to use jQuery:

$("#pId").html("Hello <span>World</span>");

Or (as you said in comments, you want to keep the existing content, but wrap the last word in a span , you can do:

var newHTML = $("#pId").html().replace(" ", " <span>");
$("#pId").html(newHTML).append("</span>");

DEMO

Answer 3

I would like to share a jQuery solution, which is regardless of any words defined in your p element

$("p").html(function(){
    var mystring= $(this).text().split(" ");
    var lastword = mystring.pop();
    return mystring.join(" ")+ (mystring.length > 0 ? " <span>"+ lastword + "</span>" : lastword);
});

Demo

In the demo above, I am splitting the string first, than am using pop to get the last index in the array, and than am adding span element and returning the string using join

Answer 4

$("document").ready(function(){
  $("p").append("<span>world</span>");
});

Answer 5

随着JQuery追加

$("#paragraphId").append('<span>Text in span</span>');

Answer 6

jQuery is easier, and personally I think it's better to use than only javascript:

jQuery:

$("#paragraphID").append("<span>World</span>");

HTML:

<p id="paragraphID">Hello</p>