[SOLVED] Why doesn't innerHTML work on jQuery collections?

Why doesn't innerHTML work on jQuery collections?

This function uses jQuery to modify the contents of a DOM element. What am I doing wrong?

function updateScore(score) {
  console.log("Test score is: " + score);
  $("#testScore").innerHTML = 'Current score is:' + score;
}

updateScore(1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<p id="testScore">

The log message shows up, but nothing else does. I have a <p> with the id testScore, but it doesn't change when I run the function. Why?

Solution

Try .html() on a jQuery object. innerHTML is for DOM-Elements.

$("#testScore").html('Current score is: '+ bucket.score);

If, for some reason, you really want to use innerHTML, you can convert the jQuery Object back to its DOM variant, for example using [0] or .get(0). Call like this, then:

$("#testScore")[0].innerHTML ='Current score is: '+ bucket.score

But I don't see why you would want to do that - since you're already writing in jQuery, there's no need to fallback to DOM methods that have a perfectly fine jQuery equivalent.