Question

以下代码应显示单词Test ...但是会显示消息TypeError：document.getElementById（...）。我无法弄清楚原因：

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Testtree</title>
  </head>
  <script>
    document.getElementById("kaptree").innerHTML="TEST";
  </script>
  <body>
     <div id="kaptree"></div>
  </body>
</html>

任何人都可以帮我睁开眼睛吗？

Answer 1

您尝试在加载之前访问kaptree元素。在加载DOM后运行脚本。

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Testtree</title> </head> <body> <div id="kaptree"></div> <script> document.getElementById("kaptree").innerHTML = "TEST"; </script> </body> </html>

Answer 2

您应该将脚本放在html元素之后。

Answer 3

此地方无法使用ID为“kaptree”的元素。将脚本块移动到正文下方并运行。

否则您必须等待文档就绪状态。

Answer 4

您的脚本是在您尝试引用的元素之前定义的。

之后移动：

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Testtree</title>
  </head>
  <body>
     <div id="kaptree"></div>
  </body>
   <script>
    document.getElementById("kaptree").innerHTML="TEST";
  </script>
</html>

或者更具可读性和可维护性的解决方案，使用函数：

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Testtree</title>
     <script>
           function changeValue(){
               document.getElementById('kaptree').innerHTML='TEST';
            }
     </script>      
  </head>
  <body>    
     <div id="kaptree"></div>
    <script>changeValue()</script>
  </body>

</html>

Answer 5

如果将带有DIV设置的主体部分移动到顶部，则可以正常工作。

它按顺序运行，因此在定义DIV之前无法指定inner.html

Answer 6

因为您的JS代码是在HTML之前调用的。

解决方案1：在</body>代码

之前添加JS

示例：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Testtree</title> </head> <body> <div id="kaptree"></div> </body> <script> document.getElementById("kaptree").innerHTML+="TEST"; </script> </html>

解决方案2：在window.load函数
中执行JS代码
示例：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Testtree</title> <script> window.onload = (function(){ document.getElementById("kaptree").innerHTML+="TEST"; }); </script> </head> <body> <div id="kaptree"></div> </body> </html>

Answer 7

一个。将脚本放在头部或身体内。

B中。将脚本放在#kaptree之后，或添加文档就绪语句。你试着打电话给那些还没有的东西。

        <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Testtree</title>
      <script>
        document.addEventListener('DOMContentLoaded', function(){ 
          document.getElementById("kaptree").innerHTML="TEST";
        }, false);
      </script>
      </head>
      <body>
         <div id="kaptree"></div>
      </body>
    </html>

Answer 8

有时解决方案很简单。

我将函数调用放入：

$( document ).ready(function() {

});

调用document.getElementById时为TypeError

8 个答案: