jQuery 追加不渲染 HTML 转义代码

Question

我正在使用这个 jQuery 命令:

 $('.body-container').append(bodyPart.content).html();

将 HTML 内容附加到我的正文中。如果“bodyPart.content”类似于:

<strong>Bold</strong>

它工作得很好，并在我的浏览器上向我展示:

粗体

但如果是:

<strong> Bold </strong>

它在浏览器上显示我:

<strong> Bold </strong>

如何让 jQuery 理解转义的 HTML 代码？

Answer 1

您可以使用替换将 < 和 > 替换为正确的字符，如下所示:

$("button").click(function(){
    var inp = $("input").val().replace(/&lt;/gi,"<").replace(/&gt;/gi,">");
    $('.body-container').append(inp).html();
});

https://jsfiddle.net/IronFlare/w7edc0cv/

<小时/>

在this question的帮助下，我想我可能已经成功解决了您的问题(希望如此):

$("button").click(function(){
    $('.body-container').append($('<div/>').html($("input").val()).text());
});

https://jsfiddle.net/IronFlare/w7edc0cv/3/