Question

可能重复：
Escaping text with jQuery append?

我的HTML有点像这样：

<div id="selector">Hello World</div>

现在我想在这个div中添加一些文字。我知道我可以简单地使用

$('#selector').append(text);

但这不会逃避text中的任何特殊字符。另一种方法是将文本包装在一个范围中：

$('#selector').append( $('<span>').text(text) );

但这很难看，因为它会产生不必要的标记。所以我目前的解决方案是手动创建一个TextNode：

$('#selector').append( document.createTextNode(text) );

我想知道是否有任何 jQuery-style 方法可以做到这一点？

Answer 1

createTextNode方法可能是最好的方法。如果你想要一个jQuery-ish语法，你可以制作一个插件。

$.fn.appendText = function(text) {
    return this.each(function() {
        var textNode = document.createTextNode(text);
        $(this).append(textNode);
    });
};

Answer 2

$.text()也接受函数作为参数。此函数将接收索引和当前文本。函数的返回值将设置为新文本。

http://jsfiddle.net/4SvgV/1/

Answer 3

你可以使用;

$.extend({
        urlEncode: function(value) {
            var encodedValue = encodeURIComponent(value);
            encodedValue = encodedValue.replace("+", "%2B");
            encodedValue = encodedValue.replace("/", "%2F");

            return encodedValue;
        },
        urlDecode: function(value) {
            var decodedValue = decodeURIComponent(value);
            decodedValue = decodedValue.replace("%2B", "+");
            decodedValue = decodedValue.replace("%2F", "/");

            return decodedValue;
        }
});

在追加到DOM之前转义HTML字符。

使用它; $.urlEncode(value)

使用它; $('#selector').append($.urlEncode(text));

更新＃1

你可以$('#selector').html($('#selector').html() + text);

我怀疑这就是你想要的。

如何使用jQuery追加/预置/创建文本节点

3 个答案: