為什么我的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