在 <p> 元素中插入<跨度>

Insert <span> in <p> element

本文关键字：插入 跨度 元素      更新时间：2023-09-26

我明白了;

<p>Variable Text</p>

我希望它成为;

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

这可以通过javascript函数吗？/或jQuery。

哦，是的，p 元素有一个 ID，p 元素中的文本是可变的，但总是由 2 个单词组成。我想要一个javascript函数围绕文本的最后一个单词。

试试这个

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

这是一个演示

这是

可能的（下面假设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>");

演示

我想分享一个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 返回字符串 

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

带有 JQuery 附加

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

jQuery 更容易，我个人认为它比只使用 javascript 更好：

j查询：

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

.HTML：

<p id="paragraphID">Hello</p>
相关文章：