CODEWITHSUNDEEP
javascriptjqueryhtml
maxicecil21
maxicecil21

Reputation: 11

Inserting HTML into tag using JavaScript

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?

Upvotes: 0

Views: 112

Answers (6)

bipen
bipen

Reputation: 36551

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

Upvotes: 1

user2469791
user2469791

Reputation:

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 $ (e.g. $node), so that you will always know if a variable is meant to be a jQuery object.

Upvotes: 1

Nitesh Mishra
Nitesh Mishra

Reputation: 311

You may use this also,

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

Upvotes: 0

manraj82
manraj82

Reputation: 6325

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

   $spanNumber.text(gameListCount)
});

Upvotes: 0

Faisal Sayed
Faisal Sayed

Reputation: 793

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

Upvotes: 0

mohkhan
mohkhan

Reputation: 12335

Its a jquery object not a DOM one..use this...

node.html(count);

Upvotes: 1

Related Questions