javascript - 如何更轻松地将 += 与 jQuery 选择器一起使用？

Question

我从 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';

Answer 1

通过 jQuery，您可以使用 append相反。

您的 $('#js').innerHTML += ' – 这是使用 JavaScript 插入的'; 可以与 [0] 一起使用，例如:

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

...因为您可以通过这种方式访问​​原始 DOM 元素。但是通过 innerHTML 附加内容是个坏主意，因为它会使浏览器工作非常困难:首先它必须遍历其内部 DOM 等效项，将其序列化为 HTML 字符串，然后它必须重新 -在完成 += 后解释新的 HTML。 (当然，后者将非常非常快，因为将 HTML 渲染到它们的内部结构是浏览器所做的，并且它们为此进行了高度优化，但前者可能不是一点都不快。)