getElementById 未正确设置文本

Question

我有一个模板，我试图在我的 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);
            },
        });
    });
})

我如何设法更新span具有该 ID的元素？

Answer 1

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

在 jQuery 中，当您选择documentwith 时$，您并不是真正在处理文档本身，而是在处理由 jQuery 生成的文档的一些“包装器”对象$，而在该包装器对象中，没有innerHTML, 或getElementById, 但有$(document.body).html("something")。

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

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

如果要使用getElementByIdand innerHTML，则不要使用 jQuery $，只需使用对节点本身的引用，如下所示：

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

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

或者，如果你想使用 jQuery 风格的选择器但不想使用 jQuery 本身，你总是可以在document.querySelectorordocument.querySelectorAll函数内使用 jQuery 选择器字符串，并将innerHTML设置为，例如：

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