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

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使用body有一些javascript。 不酷。

要在一个包裹此代码window.onload处理程序或将其放置在后 <body>标签（通过提及电子bacho 2.0 ）。

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

    <script type="text/javascript">
      window.onload = function() {
        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>

见演示。

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事件之间的区别，请参阅此问题。
移动<script>元素的位置，最后加载JavaScript：
现在，您的<script>元素正在文档的<head>元素中加载。 这意味着它将在body加载之前执行。 Google开发人员建议将<script>标记移动到页面末尾，以便在处理JavaScript之前呈现所有HTML内容。
```
 <!DOCTYPE html> <html> <head></head> <body> <p>Some paragraph</p>  <script>  </script> </body> </html> 
```

Answer 3

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

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

有关详细信息，请参阅此答案。将<script>标记放在</ body>标记后面是错误的吗？

由于这个原因，其他答案也是如此。

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，您的脚本在加载正文之前运行。 修复身体后的脚本。

  <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 个解决方案

解决方案1
155 已采纳 2012-03-28 22:44:33

解决方案2
28 2015-11-15 17:21:46

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

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

解决方案3
8 2012-03-29 02:27:21

解决方案4
4 2012-03-28 22:47:05

解决方案5
1 2012-03-28 22:56:32

解决方案6
0 2013-11-05 16:45:51

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

问题描述

6 个解决方案

解决方案1 155 已采纳 2012-03-28 22:44:33

解决方案2 28 2015-11-15 17:21:46

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

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

解决方案3 8 2012-03-29 02:27:21

解决方案4 4 2012-03-28 22:47:05

解决方案5 1 2012-03-28 22:56:32

解决方案6 0 2013-11-05 16:45:51

解决方案1
155 已采纳 2012-03-28 22:44:33

解决方案2
28 2015-11-15 17:21:46

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

解决方案3
8 2012-03-29 02:27:21

解决方案4
4 2012-03-28 22:47:05

解决方案5
1 2012-03-28 22:56:32

解决方案6
0 2013-11-05 16:45:51