<span>在</span>插入 <p> <span>元件</span>

Question

我喜歡;

<p>Variable Text</p>

我希望它成為;

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

這有可能通過javascript函數嗎？ /或jQuery。

哦是的，p元素有一個ID，p元素內的文本是可變的，但總是由2個單詞組成。 我希望通過javascript函數繞過文本的最后一個單詞。

Answer 1

試試這個

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

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

這是一個演示

Answer 2

這是可能的（以下假設p有一個ID，就像你說的那樣），它是你可以做的最簡單的形式：

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

或者如果你想使用jQuery：

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

或者（正如您在評論中所說，您希望保留現有內容，但是在一個span包裝最后一個單詞，您可以這樣做：

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

DEMO

Answer 3

我想分享一個jQuery解決方案，它與p元素中定義的任何單詞無關

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

演示

在上面的演示中，我首先拆分字符串，而不是使用pop來獲取數組中的最后一個索引，而不是添加span元素並使用join返回字符串

Answer 4

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

Answer 5

隨着JQuery追加

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

Answer 6

jQuery更容易，我個人認為使用它比使用javascript更好：

jQuery的：

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

HTML：

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