如何更轻松地使用+ = jQuery选择器?

时间:2010-11-14 16:33:44

标签: javascript jquery jquery-selectors

我从JS Bin中采用了以下示例:

HTML

<p id='js'>Hello, World!</p>`

的JavaScript

document.getElementById('js').innerHTML += ' – this was inserted using JavaScript';`

现在,我想用jQuery做同样的事情。由于我找不到一种方法来使用 + = 和jQuery选择器(否则我不会问这个问题),这里有很长的路要走:

var js = $('#js').html() + ' – this was inserted using JavaScript';
$('#js').html(js);

我使用jQuery,因为它的语法更短更简单。但这两个代码的长度几乎相同。

这不起作用:

$('#js').innerHTML += ' – this was inserted using JavaScript';

2 个答案:

答案 0 :(得分:3)

$('#js').append(' – this was inserted using JavaScript');

答案 1 :(得分:3)

使用jQuery,您可以使用append代替。

您的$('#js').innerHTML += ' – this was inserted using JavaScript';可以使用[0],例如:

$('#js')[0].innerHTML += ' – this was inserted using JavaScript';
//      ^^^--- here

...因为您可以通过这种方式访问​​原始DOM元素。但是通过innerHTML附加内容是一个坏主意,因为它使浏览器工作非常困难:首先它必须循环其内部DOM等价物,将其序列化为HTML字符串,然后它必须重新解释新的完成+=后的HTML。 (后者将真的,非常快,因为将HTML呈现在他们的内部结构中是什么浏览器并且它们已经针对它进行了高度优化,但前者可能不是很快。)