使用jQuery追加转义文本？答案

【问题标题】：Escaping text with jQuery append?使用jQuery追加转义文本？
【发布时间】：2010-10-30 23:23:51
【问题描述】：

我知道我可以使用$.html 设置某些内容的HTML 内容，并使用$.text 设置内容（并且这会转义HTML）。

不幸的是，我使用的是$.append，它不会转义 HTML。

我有这样的东西：

function onTimer() {
    $.getJSON(url, function(data) {
        $.each(data, function(i, item) {
           $('#messages').append(item);
        }
    }
}

...url 返回一个字符串数组。不幸的是，如果这些字符串之一是（例如）<script>alert('Hello')</script>，则会执行此操作。

如何让它转义 HTML？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

看看 jQuery 是如何做到的：

text: function( text ) {
    if ( typeof text !== "object" && text != null )
        return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );

    var ret = "";

    jQuery.each( text || this, function(){
        jQuery.each( this.childNodes, function(){
            if ( this.nodeType != 8 )
                ret += this.nodeType != 1 ?
                    this.nodeValue :
                    jQuery.fn.text( [ this ] );
        });
    });

    return ret;
},

所以应该这样做：

$('#mydiv').append(
    document.createTextNode('<b>Hey There!</b>')
);

编辑：关于你的例子，它很简单：

$('#messages').append(document.createTextNode(item));

【讨论】：

谢谢！现在我知道 jQuery 没有任何等效于 document.createTextNode()

【解决方案2】：

您要附加一个已经有内容的元素？或者您在追加后添加内容？无论哪种方式，您仍然需要在该元素上执行 .text(...) 。

如果您使用 append 并将 HTML 作为参数传递，请先尝试创建元素，然后将其传递给 append。

例如：

$('<div/>').text('your content here').appendTo('div#someid')

【讨论】：

这不会将文本包装在 DIV 中吗？大多数时候我看不出这会是怎样的结果。
这行得通，但它似乎有点笨拙。您想解释一下它的工作原理以及我为什么要使用它吗？
啊哈。我开始看到它。您似乎无法打开标签 - 即 $('#x').append('');稍后再关闭它。你似乎需要你的计划。

【解决方案3】：

如果你真的想让 jQuery 将一些文本转义为 HTML 片段并且不想自己直接触摸 document，那么下面的纯 jQuery 可以为你将文本转义为 HTML（但仅在 HTML 上下文中）：

jQuery('<p/>').text('v & M_FLAG == M_FLAG').html()

这可以用来非常低效地附加文本：

jQuery('#message').append(jQuery('<p/>').text(item).html());

不会插入额外的<p/> 元素，因为.html() 返回元素的HTML 格式内容，不包括元素本身。

基于 jQuery 缺乏用于实例化文本节点的内置方法，我认为 jQuery 的作者希望用户直接使用 document.createTextNode()，如 earlier answer 所示。

【讨论】：