使用JavaScript将HTML插入标记

当我试图访问代码中h4元素内部的元素时，JavaScript/jQuery出现了问题。我这样做是因为我想动态地向用户显示每个“h4”部分中有多少指南可用。对于PC部分，它应该显示“4条评论可用”，对于Xbox One部分，它应该显示“3条评论可用”。然而，两者都说“评论可用”，我认为这是因为我没有正确使用jQuery函数。以下是HTML代码：

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

---

我使用JavaScript的alert函数测试了它是否正确地获取了正确的节点和计数，但由于某些原因，node.innerHTML=count不会在元素中正确显示“content”的内容。相反，它只是显示一个空白。有人知道为什么吗？

这是一个jquery对象而不是DOM对象..使用这个

node.html(count);

---

它是一个jquery对象而不是DOM对象..使用这个

node.html(count);

使用

find（）

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

而您在
h4
中的HTML
li
无效，请确保您更改了该设置
使用
find（）
更加清晰易读

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

而您在
h4
中的HTML
li
无效，请确保您更改了该设置
节点
是这里的jQuery对象。它没有“innerHTML”。相反，您可以使用以下选项之一：

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

node.get（0）
将为您提供jqueryone中的第一个DOM对象

一个好的做法是在所有jQuery对象的前面或后面加上
$
（例如
$node
），这样您就可以始终知道变量是否是jQuery对象。
node
在这里是jQuery对象。它没有“innerHTML”。相反，您可以使用以下选项之一：

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

node.get（0）
将为您提供jqueryone中的第一个DOM对象

一个好的做法是在所有jQuery对象的前面或后面加上
$
（例如
$node
），这样您就可以始终知道变量是否是jQuery对象。
不要使用
.children（）.children（）

只有一个
.children（）
可以

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

另外，
innerHTML
是纯javascript。使用
.html（value）
作为
节点
是JQuery对象

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

参考JQuery API：


不要使用
.children（）.children（）

只有一个
.children（）
可以

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

另外，
innerHTML
是纯javascript。使用
.html（value）
作为
节点
是JQuery对象

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

参考JQuery API：


您也可以使用这个

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

你也可以用这个

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

为什么你在H4有一个
？？