将 html 结构包裹在文本周围

Question

给定一些文本和一个 html 结构，我如何创建一个新的 html 片段，其中结构包裹在文本周围？

例子：

text = "mytext"
html = "<div><p><span></span></p></div>"

想要的结果：

newHtml = "<div><p><span>mytext</span></p></div>"

如果可能，使用纯 jquery，无需手动解析 html。请注意，“文本”是文字字符串，而不是文档中的文本节点。

当然，我要查找的代码应该适用于任意 html，而不仅仅是上面的示例。

Answer 1

类似于：

var text = "mytext";
var html = "<div><p><span></span></p></div>";
var div = $(html);
div.find('span').html(text);
div.appendTo(someOtherElement);

Answer 2

为此感谢@Blender（根据要求作为答案发布）：

text = "mytext"
html = "<div><p><span></span></p></div>"

newHtml = $(html);
newHtml.find('*:last').text(text);

console.log(newHtml.get(0)); // <div><p><span>mytext</span></p></div>

所以从html 字符串构造一个jQuery 对象，然后找到:last 的后代（在本例中为span），并设置text。

Here's a fiddle

Answer 3

尝试关注

var text = "mytext",
    mainDiv = $("<div/>"),
    para = $("<p/>"),
    span = $("<span/>", {"html":text});

mainDiv.append(para.append(span));

//or you can write all above in one liner

我希望它有所帮助。

Answer 4

你试过在 jQuery 中使用 .wrap() 吗？ 试试

    $('span').wrap(text);

Answer 5

您可以通过以下方式在占位符的帮助下实现它，

text = "mytext"
oldHtml = "<div><p><span>[0]</span></p></div>"
newHtml = oldHtml.replace("[0]",text);