getElementById does not set text correctly

Question

I have a template which im trying to change the content of a span using getElementById.innerHTML in my ajax success function however, it is not working. I do not see what the issue is since when I print out my data it is correct. Currently I have template like this:

<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>

my jQuery code is:

$(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);
            },
        });
    });
})

How can I manage to update the span element with that id?

Does this answer your question? [Update div with jQuery ajax response html](https://stackoverflow.com/questions/18064666/update-div-with-jquery-ajax-response-html) — Daniel Brose, May 18 '20 at 02:54
Why not directly call `$('#like-count-d').html(data.likescount)` ? — Firman Putra, May 18 '20 at 02:55
Does this answer your question? [JQuery - $(document).getElementById('id').submit(function{}); unedifined not a function](https://stackoverflow.com/questions/23341103/jquery-document-getelementbyidid-submitfunction-unedifined-not-a-f) — Sebastian Simon, May 18 '20 at 03:08

B''H Bi'ezras -- Boruch Hashem · Accepted Answer · 2020-05-19T07:10:08.627

The problem is that the jQuery library selector $ is being mistaken for native JavaScript functions.

In jQuery, when you select the document with $, you’re not really dealing with the document itself, you’re dealing with some “wrapper” object for the document, which gets generated by jQuery's $, and in that wrapper object, there’s no concept of innerHTML, or getElementById, but there is $(document.body).html("something").

If you wanted to select and edit the HTML of a particular element with an ID, then use the # operator in a string, and call the .html method on it, like this:

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

If you want to use getElementById and innerHTML, then don’t use jQuery’s $, just use a reference to the node itself, like this:

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

and visa versa, if you don't want to use jQuery, then use document.getElementById.

Alternatively, if you want to use the jQuery-style selectors but don't want to use jQuery itself, you can always use the jQuery selector strings inside of the document.querySelector or document.querySelectorAll functions, and set the innerHTML to that, like:

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

score 1 · Answer 2 · answered May 18 '20 at 03:07

1

You can simply use html() or text() of jQuery for the same. Kindly refer to this.

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

answered May 18 '20 at 03:07

Ishan Shah

383
2
8

getElementById does not set text correctly

2 Answers2