Javascript錯誤 - 無法調用方法'appendChild'null

我是JavaScript新手（一般編程），並一直在嘗試獲得有關使用DOM的基本知識。道歉，如果這是一個非常基本的錯誤，但我環顧四周，找不到答案。Javascript錯誤 - 無法調用方法'appendChild'null

我想使用appendChild方法將一個標題和一些段落文本添加到下面非常基本的HTML文件中。

<html> 
<head> 
    <title>JS Practice</title> 
</head> 
<body> 
    <script src="script.js"></script> 
    <div id = "main"> 
     <h1>Simple HTML Page</h1> 
     <p>This is a very simple HTML page.</p> 
     <p>It's about as basic as they come. It has: </p> 
     <ul> 
      <li>An H1 Tag</li> 
      <li>Two paragraphs</li> 
      <li>An unordered list</li> 
     </ul> 
    </div> 
    <div id="javascript"> 
    </div> 
</body> 
</html>

這裏是js代碼：

var newHeading = document.createElement("h1"); 
var newParagraph = document.createElement("p"); 

newHeading.innerHTML = "New Heading!"; 
newParagraph.innerHTML = "Some text for a paragraph."; 

document.getElementById("javascript").appendChild(newHeading); 
document.getElementById("javascript").appendChild(newParagraph);

運行它會導致一個錯誤：「不能調用方法 '的appendChild' 空的」

幫助？我不明白爲什麼這不起作用...

來源

2011-12-29 Ben

假設這個代碼是script.js文件中，這是因爲HTML頁面的其餘部分加載之前的JavaScript運行。

當一個HTML頁面加載時，當它遇到鏈接的資源（如JavaScript文件）時，它會加載該資源，執行所有代碼，然後繼續運行該頁面。因此，您的代碼在頁面上加載<div>之前正在運行。

將您的<script>標記移動到頁面底部，並且不應再有錯誤。或者，引入一個事件，如<body onload="doSomething();">，然後在您的JavaScript文件中創建一個doSomething()方法，該方法將運行這些語句。

來源

2011-12-29 16:38:44 Tejs

您的腳本在元素可用之前正在運行。

直接在關閉</body>標記之前放置腳本。

<html> 
<head> 
    <title>JS Practice</title> 
</head> 
<body> 
    <div id = "main"> 
     <h1>Simple HTML Page</h1> 
     <p>This is a very simple HTML page.</p> 
     <p>It's about as basic as they come. It has: </p> 
     <ul> 
      <li>An H1 Tag</li> 
      <li>Two paragraphs</li> 
      <li>An unordered list</li> 
     </ul> 
    </div> 
    <div id="javascript"> 
    </div> 

    <!-- Now it will run after the above elements have been created --> 
    <script src="script.js"></script> 
</body> 
</html>

來源

2011-12-29 16:37:13

有一個更簡單的方法來解決這個問題。將JavaScript放入函數中並使用window.onload。例如：

window.onload = function any_function_name() 
{ 

var newHeading = document.createElement("h1"); 
var newParagraph = document.createElement("p"); 

newHeading.innerHTML = "New Heading!"; 
newParagraph.innerHTML = "Some text for a paragraph."; 

document.getElementById("javascript").appendChild(newHeading); 
document.getElementById("javascript").appendChild(newParagraph); 
}

現在，您不必移動標記，因爲在HTML加載完成後，它將運行您的代碼。

來源

2014-02-27 21:40:32 Brendan

我添加事件偵聽器等待DOM內容完全加載

document.addEventListener("DOMContentLoaded", function() { 
    place_the_code_you_want_to_run_after_page_load 
})

來源

2016-09-16 03:19:14

沒有加載你的DOM，所以的getElementById將返回null，使用的document.ready（）jQuery中

$(document).ready(function(){ 

    var newHeading = document.createElement("h1"); 
    var newParagraph = document.createElement("p"); 

    newHeading.innerHTML = "New Heading!"; 
    newParagraph.innerHTML = "Some text for a paragraph."; 

    document.getElementById("javascript").appendChild(newHeading); 
    document.getElementById("javascript").appendChild(newParagraph); 

    }

來源

2017-05-09 09:10:13

因爲您的JavaScript文件是先加載的，那麼當您編寫window.document.body.appendChild(btn),body元素未在html中加載時，這就是爲什麼您在這裏出現錯誤，一旦body元素被加載到DOM中，您就可以加載js文件。

的index.html

<html> 
    <head> 
     <script src="JavaScript.js"></script>  
    </head> 
    <body onload="init()"> 
      <h3> button will come here</h3> 
    </body> 
</html>

的JavaScript。js

function init(){ 

    var button = window.document.createElement("button"); 

    var textNode = window.document.createTextNode("click me"); 

    button.appendChild(textNode); 

    window.document.body.appendChild(button); 

    }

來源

2017-06-06 06:45:09

Javascript錯誤 - 無法調用方法'appendChild'null

回答

相關問題