在<p>元素中插入<span>元素

Question

我收到了如下内容；

<p>Variable Text</p>

我希望你能够将其变成：

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

这是否可以通过JavaScript函数/或jQuery实现?

是的，而且p元素有一个ID，p元素内的文本是可变的，但始终由2个单词组成。我想通过JavaScript函数在文本的最后一个单词周围添加一个span。

- Anoniem Anoniem

---

jQuery / JavaScript，对我来说都无所谓。只要它能正常工作就行。 - Anoniem Anoniem

@AnoniemAnoniem发布了一个新答案。 - iJade

Answer 1

试试这个

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

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

这里有一个演示

- iJade

---

很高兴它帮助到您了...别忘了点赞或标记为答案 ;) - iJade

我必须等一会儿才能将其标记为答案，你太快了！ - Anoniem Anoniem

Answer 2

如果您说的是正确的，ID为p，那么实现起来是可能的。最简单的形式如下：

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

或者如果您想使用jQuery：

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

或者（根据您在评论中提供的信息，您希望保留现有内容，但将最后一个单词用标签包裹），您可以这样做：

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

演示

- mattytommo

---

@Downvoter 有什么评论吗？是因为我没有使用jQuery吗？醒醒吧，除了jQuery的世界还有JavaScript。 - Mathew Thompson

但是<p>标签内的文本是可变的，且始终由两个单词组成。我想在最后一个（第二个）单词周围（即空格后面的那个单词）加上<span>标签。 - Anoniem Anoniem

未捕获的 TypeError: 对象 <span> 没有 'append' 方法。 - Anoniem Anoniem

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返回字符串。

- Mr. Alien

Answer 4

使用jQuery的append方法

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

- Nikhil Chavan

Answer 5

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

- Robby Zhi

---

但是<p>标签内的文本是可变的，总是由两个单词组成。我想要在最后（第二个）单词周围加上<span>标签。 - Anoniem Anoniem

Answer 6

jQuery更容易使用，个人认为它比仅使用JavaScript更好：

jQuery：

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

HTML：

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

- Christopher