innerHTML 无法将文本注入标记答案

【问题标题】：innerHTML failing to inject text into markupinnerHTML 无法将文本注入标记
【发布时间】：2015-11-26 05:15:31
【问题描述】：

我正在学习 jQuerys animate 并正在构建一个小游戏，用户必须通过尝试单击它来捕捉框，并且每次单击分数都会增加 1 分，该分数会动态显示在屏幕上 @ 987654323@元素。

问题是<p>中没有显示分数。

通过调试应用程序，我可以看到分数实际上正在递增，因此排除了递增中的缺陷。我认为唯一的另一种可能性是因为$(document).ready 没有在每个click 上被解雇，但这是错误的，因为分数确实增加了。因此，我能想到的唯一解决方案是，在我实现 .innerHTML 的方式背后发生了一些事情，但我无法理解它。

我曾尝试使用value() 而不是toString()，因为我最初认为获取变量points 的实际value 会返回其原始数值，但这并没有做任何事情。

这是我遇到问题的 jQuery 行：

var points = 0;
$(document).ready(function () {
    Animate();
    div.on('mousedown', function () {
        points += 1;
        $('#points').innerHTML += points.toString();
    });
});

以及它所引用的 HTML 标记：

<body>
    <p id="points">Total points: </p>
    <div id="box"></div>
    <script src="script.js"></script>
</body>

请注意，分数需要添加到<p> 不替换<p>的内容，例如如果分数增加<p>将显示Total Points: 1

这里是我的JFiddle 以获得对问题的完整视图

【问题讨论】：

$('#points')[0].innerHTML += points.toString(); 或 $('#points').html(function(i,html){ return html + points.toString(); });

标签： javascript jquery html innerhtml

【解决方案1】：

Working Fiddle

HTML

<p id="points">Total points: <span id="total-points"></span></p>
<div id="box"></div>

删除这个 Javascript

$('#points').innerHTML += points.toString();

用这个替换

$('#total-points').text(points);

【讨论】：

【解决方案2】：

$(document).ready(function () {
    var totPoints="Total points: "; // define a variable with this string value
    Animate();
    div.on('mousedown', function () {
        points += 1;
        $('#points').html( totPoints+ points.toString()); // concatenate and add the html
        alert("Points" + points.toString());// Wrote this to prove that    points score IS being incremented
    });
});

【讨论】：

【解决方案3】：

使用innerHtml可以直接使用$('#points').html( "Total points: "+ +points.toString());

工作jsFiddle

【讨论】：

【解决方案4】：

尝试使用 $("#points").html(points);这会起作用。

将 .innerHTML 与 jquery 一起使用会产生问题，因为 jquery 以与纯 js 不同的方式使用它。

【讨论】：