在jQuery中追加HTML转义文本

Question

我习惯使用jQuery的.append()方法将文本或HTML添加到已有元素的末尾。我目前使用jQuery的.text()对可能包含HTML的字符串进行转义。不幸的是，似乎没有一种jQuery方法能够将.text()方法的结果附加到元素上而不是替换其内容。

是否有一种方式可以附加而不是替换此转义后的文本到一个元素上？或者是否有更好的方法来转义包含HTML的字符串？

谢谢。

-编辑-

更多背景：我正在动态构建一个HTML字符串，因此需要能够以编程方式添加具有转义内容的多个元素。

- Nathan Friend

---

你可以单独转义HTML，例如：https://dev59.com/S2025IYBdhLWcg3wZ1Ry。 - Dave Newton

Answer 1

我尝试了很多方法，认为以下方法是向任何节点添加文本的最清洁的方式。 不需要存储标签，只需要纯文本，这将有助于避免潜在的问题。

$(document.createTextNode("SomePlainText")).appendTo(p);

- user655000

Answer 2

您可以创建一个虚拟元素来保存.text()的结果，然后将其附加到您的目标元素中：

$('<div/>').text('your <span>html</span> string').appendTo(...);

- João Silva

---

好主意。我会使用这个，只需稍作修改 - $('<div/>').text('your <span>html</span> string').html();。这样我就不会在文本中得到实际的虚拟元素了。 - Nathan Friend

顺便提一下，您也可以使用 document.createTextNode 并将其附加。 - pimvdb

Answer 3

您可以直接使用

$(whatever).text($(whatever).text() + whatever_you_want_to_append);

针对我评论中的fiddle进行编辑，尝试这个：

for ( /* some looping parameters */ ) {
    $('<li></li>') // create an li
        .text(stringWithHtml) // pass it the text, as text not html
        .appendTo('#thisIsWhatINeed'); // append it where you want it
}

jsFiddle

（注：此为IT相关内容）

- KRyan

---

请注意，.text 还可以接受一个函数：$(whatever).text(function(i, txt) { return txt + foo;});。 - Felix Kling

是的，这对于单个添加操作可以工作。然而，我需要能够在循环中附加多个带有转义内容的元素 - 请参见我的编辑。 - Nathan Friend

@friendlycello：我提供的代码完全可以在循环或其他情况下使用，没有任何问题。 - KRyan

@DragoonWraith：抱歉，我的表达不够清晰。我是指这个 - 演示。 - Nathan Friend

@friendlycello：啊，有点不同。请查看更新的答案。现在与João的相当相似。 - KRyan

@DragoonWraith：我喜欢那个。比我现在做的稍微干净一些。谢谢。 - Nathan Friend