Question

这是我的简短HTML文档。

为什么Chrome控制台会注意到此错误：

“未捕获的TypeError：无法调用null”的方法'appendChild'？

<html>
<head>
    <title>Javascript Tests</title>

    <script type="text/javascript">

        var mySpan = document.createElement("span");
        mySpan.innerHTML = "This is my span!";

        mySpan.style.color = "red";
        document.body.appendChild(mySpan);

        alert("Why does the span change after this alert? Not before?");

    </script>
</head>
<body>

</body>
</html>

Answer 1

此时尚未确定身体。通常，您希望在执行使用这些元素的javascript之前创建所有元素。在这种情况下，您在使用head的{{1}}部分中有一些javascript。不酷。

您希望将此代码包装在body处理程序中，或将其放在<{strong> window.onload标记之后（如e-bacho 2.0所述）。

<body>

See demo

Answer 2

在body元素加载之前，您的脚本正在执行。

有几种方法可以解决这个问题。

将代码包装在DOM Load回调中：

将您的逻辑包含在DOMContentLoaded的事件监听器中。

这样做时，将在加载body元素时执行回调。
```
document.addEventListener('DOMContentLoaded', function () {
    // ...
    // Place code here.
    // ...
});
```
根据您的需要，您也可以将load事件监听器附加到window对象：
```
window.addEventListener('load', function () {
    // ...
    // Place code here.
    // ...
});
```
对于DOMContentLoaded和load事件之间的差异，see this question。
移动<script>元素的位置，最后加载JavaScript：

现在，您的<script>元素正在文档的<head>元素中加载。这意味着它将在body加载之前执行。 Google developers建议将<script>标记移至页面末尾，以便在处理JavaScript之前呈现所有HTML内容。
```
<!DOCTYPE html>
<html>
<head></head>
<body>
  <p>Some paragraph</p>
  

  <script>
    
  </script>
</body>
</html>
```

Answer 3

将您的代码添加到onload事件中。接受的答案正确地显示了这一点，但是在撰写本文时，答案以及所有其他答案也建议将脚本标记放在结束标记之后，。

这不是有效的HTML。但是它会导致你的代码工作，因为浏览器太友善了;）

有关详细信息，请参阅此答案 Is it wrong to place the <script> tag after the </body> tag?

出于这个原因，他们给出了其他答案。

Answer 4

或添加此部分

<script type="text/javascript">

    var mySpan = document.createElement("span");
    mySpan.innerHTML = "This is my span!";

    mySpan.style.color = "red";
    document.body.appendChild(mySpan);

    alert("Why does the span change after this alert? Not before?");

</script>

在HTML之后，如：

    <html>
    <head>...</head>
    <body>...</body>
   <script type="text/javascript">
        var mySpan = document.createElement("span");
        mySpan.innerHTML = "This is my span!";

        mySpan.style.color = "red";
        document.body.appendChild(mySpan);

        alert("Why does the span change after this alert? Not before?");

    </script>

    </html>

Answer 5

浏览器从上到下解析你的html，你的脚本在加载body之前运行。修复身体后的脚本。

  <html>
  <head>
       <title> Javascript Tests </title> 
  </head>
 <body>
 </body>
  <script type="text/javascript">

    var mySpan = document.createElement("span");
    mySpan.innerHTML = "This is my span!";

    mySpan.style.color = "red";
    document.body.appendChild(mySpan);

    alert("Why does the span change after this alert? Not before?");

</script>
</html>

Answer 6

代码运行时

document.body尚未可用。

你能做什么呢？

var docBody=document.getElementsByTagName("body")[0];
docBody.appendChild(mySpan);

为什么我的javascript中的document.body为null？

6 个答案:

将代码包装在DOM Load回调中：

移动`<script>`元素的位置，最后加载JavaScript：

为什么我的javascript中的document.body为null？

6 个答案:

将代码包装在DOM Load回调中：

移动<script>元素的位置，最后加载JavaScript：

移动`<script>`元素的位置，最后加载JavaScript：