有没有一种直接的方法可以使用 jQuery 将文本附加到 DOM 元素？

Question

jQuery有没有更直接的写法？

var $b = $('b');
$b.text($b.text() + ', World!!');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<b>Hello</b>

这个接缝就像 jQuery 的现有功能一样，因为 vanilla JavaScript 可以通过直接访问属性.

来实现

document.querySelector('b').innerText += ', World!!';

我查看了 .append() method, however it appears that it isn't designed for appending text, even though it works:

$('b').append(', World!!');

此外，附加说明部分还警告使用 .append() 时存在 XSS 漏洞，因为它可能会执行代码。

Answer 1

使用text()

$('b').text("Hello");

We need to be aware that this method escapes the string provided as necessary so that it will render correctly in HTML. To do so, it calls the DOM method .createTextNode(), which replaces special characters with their HTML entity equivalents (such as < for <)

当您使用 .text() 时 jQuery 在内部使用 createTextNode，它会转义所有特殊字符。

Answer 2

没有。正如您已经指出的，最简洁的方法是直接修改属性。

要在 jQuery 中做到这一点，您可以从对象中获取 DOM 元素引用：

var $b = $('b');
$b[0].innerText += ', World!!';

JSFiddle

或者，

您可以将一个函数传递给 .text()，这不是任何 'cleaner'，但如果您想使用上下文，它会非常有用：

var $b = $('b');
$b.text(function(_,v){
    return v += ', World!!';
});

JSFiddle

或者，

如果真的打扰到您，介绍您自己的 jQuery 方法：

jQuery.fn.appendText = function(a){
    return this.each(function(){
        $(this).text(function(_,v){
            return v += a;
        });
    });
};

像这样使用：

$b.appendText(', World!!');

JSFiddle

'This seams like something jQuery would have existing functionality for, as vanilla JavaScript can do it by direct access to the property.'

可能正是 jQuery 没有实现自己的方法的原因。为什么要用一种方法来浪费宝贵的字节，而这种方法可以执行一些用普通 JavaScript 很容易完成的事情？

有没有一种直接的方法可以使用 jQuery 将文本附加到 DOM 元素？

Is there a direct way of appending text to a DOM element with jQuery?

javascript

xss

jquery