JavaScript中用if-else打印列表仅输出首个元素的问题

兄弟，我一眼就瞅出问题所在了！你现在的代码逻辑错在只获取了<ul>元素的集合，却没有遍历<ul>内部的<li>子元素，这才导致只输出了第一个相关内容。

先拆解你的核心问题：

• document.getElementsByTagName("ul")返回的是页面上所有<ul>标签的集合，你的页面里只有一个<ul id="stt">，所以外层循环只会执行一次，根本没碰里面的<li>元素。
• 你需要先定位到目标<ul>，再获取它下面的所有<li>，最后遍历这些<li>来做if-else判断。

修正后的完整代码 #

<html> 
  <ul id="stt"> 
    <li>First</li> 
    <li></li> 
    <li>Third</li> 
    <li>Fourth</li> 
    <li></li> 
    <li>Fifth</li> 
  </ul> 
  <script> 
    // 直接通过ID获取目标ul，比遍历ul集合更高效
    var targetUl = document.getElementById("stt");
    // 获取该ul下的所有li元素
    var listItems = targetUl.getElementsByTagName("li");
    var txt = "";

    // 遍历所有li元素
    for (var i = 0; i < listItems.length; ++i) {
      // 取出li的文本内容并去除首尾空格，避免空li里有空格的情况
      var liText = listItems[i].textContent.trim();
      if (liText) {
        // li有内容时，添加内容到结果字符串
        txt += liText + "\n";
      } else {
        // li为空时，添加你需要的'Bit On'
        txt += "Bit On\n";
      }
    }

    // 打印完整结果到控制台
    console.log(txt);
    // 如果要在页面显示，也可以用类似 document.body.textContent = txt 的方式
  </script>
</html>

额外优化小提示 #

• 用document.getElementById()获取带ID的元素是最直接高效的，不用遍历标签集合；
• textContent比innerText兼容性更好，能准确获取元素的所有文本内容；
• 加上trim()可以处理li标签里只有空格的情况，避免误判为非空内容。

运行修正后的代码，你就能得到完整的输出：

First
Bit On
Third
Fourth
Bit On
Fifth

内容的提问来源于stack exchange，提问作者user6642297