时间戳

首页 > 解决方案 > getElementById 未正确设置文本

javascript - getElementById 未正确设置文本

问题描述

我有一个模板，我试图在我的 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 更新元素？

标签： javascripthtmljquery

解决方案

问题是 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;

推荐阅读