使用innerText或innerHTML不会显示文本

Text won't show up using innerText or innerHTML

本文关键字：显示 文本 innerHTML innerText 使用      更新时间：2023-09-26

正如标题所说，我正在学习javascript，仍然是初学者。
这里是Html文件:

<!DOCTYPE html>
<html>
<head>
 <title>jQuery</title>
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
  <h1 class="menu"></h1>
  <script type="text/javascript">
   function clr(o){
    var a1 = [];
    var i = 0;
    for (var k in o){
        a1[i] = 0;
        i++;
    }
    return a1;
   }
   console.log(clr({a:"a", b:"b", c:"c"}));
   document.getElementsByClassName("menu").innerText = clr({a:"a", b:"b", c:"c"});
  </script>
</body>
</html>

既然你正在运行Jquery，你可以使用Jquery方法。如text()或html()

但你的问题是，document.getElementsByClassName("menu")返回一个HTML集合，所以你必须这样做:document.getElementsByClassName("menu")[0].innerHTML 

<!DOCTYPE html>
<html>
<head>
 <title>jQuery</title>
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
  <h1 class="menu"></h1>
  <script type="text/javascript">
   function clr(o){
    var a1 = [];
    var i = 0;
    for (var k in o){
        a1[i] = 0;
        i++;
    }
    return a1;
   }
   console.log(clr({a:"a", b:"b", c:"c"}));
   $(".menu").text(clr({a:"a", b:"b", c:"c"}));
  </script>
</body>
</html>

document.getElementsByClassName("menu")将返回一个包含menu类元素的类数组NodeList。

因为它是一个类似数组的对象，你需要使用[]来访问单独的元素。

在您的示例中，它将是一个包含1个元素的数组，即h1元素，因此要访问它，您需要在位置0:

获取它
document.getElementsByClassName("menu")[0].innerHTML = clr({a:"a", b:"b", c:"c"});
----------------------------------------^

我编辑了一些东西。你很接近了。我给了h1和id。并使用document.getElementById.

<!DOCTYPE html>
<html>
<head>
 <title>jQuery</title>
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
  <h1 id="menu"></h1>
  <script type="text/javascript">
   function clr(o){
    var a1 = [];
    var i = 0;
    for (var k in o){
        a1[i] = 0;
        i++;
    }
    return a1;
   }
   console.log(clr({a:"a", b:"b", c:"c"}));
   document.getElementById("menu").innerHTML = clr({a:"a", b:"b", c:"c"});
  </script>
</body>
</html>

相关文章：