使用jQuery append转义文本？

Question

我知道可以使用$.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？

- Roger Lipscombe

Answer 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));

- Paolo Bergantino

---

谢谢！我现在知道jQuery没有document.createTextNode()的等效函数。 - Hendy Irawan

Answer 2

您是在追加已经有内容的元素吗？还是在追加内容后添加？无论哪种方式，您仍然需要在该元素上执行.text(...)操作。

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

例如：

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

- Matt

---

这不会将文本包装在 DIV 中吗？我无法看出大多数情况下为什么会需要这样做。 - Paolo Bergantino

可以运行，但感觉有点笨重。你想加入一些关于它如何工作以及为什么要使用它的解释吗？ - Roger Lipscombe

啊哈，我开始明白了。似乎你不能打开一个标签，然后稍后再关闭它，例如$('#x').append('<strong>');。你似乎需要你的方案。 - Roger Lipscombe

Answer 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()，如早期答案所示。

- binki