getElementById 未正确设置文本答案

【问题标题】：getElementById does not set text correctlygetElementById 未正确设置文本
【发布时间】：2020-05-18 02:51:44
【问题描述】：

我有一个模板，我试图在我的 ajax 成功函数中使用 getElementById.innerHTML 更改跨度的内容，但是它不起作用。我看不出问题出在哪里，因为当我打印出我的数据时它是正确的。目前我有这样的模板：

<div class="post-ctr">
    <div>
      <span id="like-count-d"></span>
    </div>
    <div class="like-section">
     <!-- likeBtn Form is here which gets updated -->
    </div>
</div>

我的 jQuery 代码是：

$(document).ready(function (e) {
    $('.post-ctr').on("click", ".likeBtn", function (e) {
        var btn = $(this)
        e.preventDefault();
        e.stopImmediatePropagation();
        var tk = $(this).attr("data-token");
        $.ajax({
            type: "POST",
            url: $(this).attr("data-url"),
            dataType: 'json',
            data: { 'csrfmiddlewaretoken':tk },
            success: function (data){
                $(btn).closest(".like-section").html(data.post_likes);
                $(document).getElementById('like-count-d').innerHTML = data.likescount;
            },
            error: function(rs, e){
                console.log(rs.responeText);
            },
        });
    });
})

如何使用该 ID 更新 span 元素？

【问题讨论】：

这能回答你的问题吗？ Update div with jQuery ajax response html
为什么不直接拨打$('#like-count-d').html(data.likescount)？
这能回答你的问题吗？ JQuery - $(document).getElementById('id').submit(function{}); unedifined not a function

标签： javascript html jquery

【解决方案1】：

问题在于 jQuery 库选择器 $ 被误认为是原生 JavaScript 函数。

在 jQuery 中，当您选择 document 和 $ 时，您实际上并不是在处理文档本身，而是在处理文档的一些“包装”对象，它由 jQuery 的 @987654324 生成@，并且在该包装对象中，没有innerHTML 或getElementById 的概念，但有$(document.body).html("something")。

如果您想选择和编辑带有 ID 的特定元素的 HTML，则在字符串中使用 # 运算符，并在其上调用 .html 方法，如下所示：

$("#like-count-d").html(data.likescount/*or other string*/);

如果你想使用getElementById和innerHTML，那么不要使用jQuery的$，只需使用对节点本身的引用，像这样：

document.getElementById('like-count-d').innerHTML = data.likescount;

反之亦然，如果您不想使用 jQuery，请使用document.getElementById。

或者，如果您想使用 jQuery 样式的选择器但不想使用 jQuery 本身，您可以始终在 document.querySelector 或 document.querySelectorAll 函数中使用 jQuery 选择器字符串，并将 innerHTML 设置为比如：

document. querySelector("#like-count-d").innerHTML = data.likescount;

【讨论】：

【解决方案2】：

您可以简单地使用 jQuery 的 html() 或 text() 来实现相同的目的。请参考这里。

$("#like-count-d").html(data.likescount);
$("#like-count-d").text(data.likescount);

【讨论】：