Question

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

示例：

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

期望的结果：

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

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

当然，我正在寻找的代码应该使用任意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

尝试以下

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 3

您是否尝试在jQuery中使用.wrap（）？尝试

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

Answer 4

你可以在占位符的帮助下实现它，如下所示，

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

Answer 5

归功于@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。

在文本周围包装一个html结构

5 个答案:

Here's a fiddle