Inserting HTML into tag using JavaScript

Question

I'm having a problem with JavaScript/jQuery at the moment where I'm trying to access the element inside the h4 element in my code. I'm doing this because I would like to dynamically display to the user how many guides are available in each "h4" section. For the PC section, it should display "4 reviews available" and for the Xbox One section, it should display "3 reviews available". However, both say " reviews available", and I'm assuming it's because I'm not using the jQuery functions properly. Here's the HTML code:

  <h4><li class="console">PC (<span class="number"></span> reviews available)</li></h4>
  <div class="gameList">
      <ul>
          <li class="game"><a href="#">Guide #1</a></li>
          <li class="game"><a href="#">Guide #2</a></li>
          <li class="game"><a href="#">Guide #3</a></li>
          <li class="game"><a href="#">Guide #4</a></li>
      </ul>
  </div>
  <h4><li class="console">Xbox One (<span class="number"></span> reviews available)</li></h4>
  <div class="gameList">
      <ul>
          <li class="game"><a href="#">Guide #1</a></li>
          <li class="game"><a href="#">Guide #2</a></li>
          <li class="game"><a href="#">Guide #3</a></li>
      </ul>
  </div> 

And here's the jQuery/JavaScript code:

$("h4").each(function() {
    var node = $(this).children().children(); // gets node that has "number" class  
    var count = $(this).next().children().children().length; // gets number of li tags
    node.innerHTML = count;
});

I tested whether or not it's properly getting the correct node and count by using the alert function for JavaScript, but for some reason, node.innerHTML = count won't display the contents of "content" properly in the element. Rather, it just displays a blank. Does anyone know why?

Answer 1

它是一个jQuery对象，而不是DOM对象。

node.html(count);

Answer 2

use find() lot more cleaner and readable

$("h4").each(function() {
   var $this=$(this);
    var node = $this.find('.number'); 
   var count = $this.next().find('li').length; // gets number of li tags
   node.text(count);  //or html()
}); 

and you have come invalid HTML li in h4 make sure you change that working fiddle here

Answer 3

node is a jQuery object here. It does not have "innerHTML". Instead you can use one of these:

node.html(count);
node.get(0).innerHTML = count;

node.get(0) will give you first DOM object from jQuery one.

A good practice is to prefix or suffix all jQuery objects with $ (eg $node ), so that you will always know if a variable is meant to be a jQuery object.

Answer 4

Do not use .children().children() .

Only one .children() would do.

$(this).children('.game');

Also innerHTML is plain javascript. use .html(value) as node is JQuery Object.

$("h4").each(function() {
    var node = $(this).children('.number');
    var count = $(this).next().children('li').length;
    node.html(count);
});

Reference to JQuery APIs:

.html()

.children()

Answer 5

$("h4").each(function() {
   var $spanNumber = $('.console .number', this),
       gameListCount = $(this).next().find('ul li').size();

   $spanNumber.text(gameListCount)
});

Answer 6

You may use this also,

$("h4").each(function() {
    var node = $(this).find('.number'); 
   var count = $(this).next().find('.game').length;
   node.html(count);
});