[英]Javascript error - cannot call method 'appendChild' of null
我是Java語言（和一般編程語言）的新手，並且一直在嘗試使用DOM。 抱歉，這是一個非常基本的錯誤，但我環顧四周，找不到答案。
我正在嘗試使用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'為null”
救命？ 我不知道為什么這不起作用...
假設此代碼位於script.js文件中，這是因為javascript在HTML頁面的其余部分加載之前就已在運行。
加載HTML頁面時，當遇到鏈接資源（例如javascript文件）時，它將加載該資源，執行所有可能的代碼，然后繼續運行該頁面。 因此，在<div>加載到頁面上之前，您的代碼正在運行。
將您的<script>標記移到頁面底部，您應該不再出現錯誤。 或者，引入一個事件，例如<body onload="doSomething();"> ，然后在您的JavaScript文件中創建一個doSomething()方法，該方法將運行這些語句。
有一種更簡單的方法來解決此問題。 將您的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加載后運行您的代碼。
在元素可用之前，腳本正在運行。
將腳本直接放在結束</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>
我添加了一個事件偵聽器，以等待DOM內容完全加載
document.addEventListener("DOMContentLoaded", function() {
place_the_code_you_want_to_run_after_page_load
})
您的DOM未加載，因此getElementById將返回null，請在jquery中使用document.ready（）
$(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);
}
因為您的JavaScript文件是首先加載的，並且當您編寫window.document.body.appendChild(btn) ， body元素沒有以html加載，這就是為什么您在這里遇到錯誤的原因，一旦body元素可以加載js文件已加載到DOM中。
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);
}
“無法將方法'appendchild'調用為null” ...錯誤...為什么？
[英]“cannot call method 'appendchild' to null”…error…why?
未捕獲的TypeError：無法調用null的方法“ appendChild”？
[英]Uncaught TypeError: Cannot call method 'appendChild' of null?
如何修復“Uncaught TypeError：無法調用方法'appendChild'的null”
[英]How to fix “Uncaught TypeError: Cannot call method 'appendChild' of null”
JavaScript RunTime錯誤：appendChild（） - 對IE8中的方法或屬性的意外調用
[英]JavaScript RunTime Error : appendChild() - Unexpected call to method or property in IE8
Pentaho中的JavaScript錯誤-無法調用null的方法“ toUpperCase”
[英]JavaScript Error in Pentaho - Cannot call method “toUpperCase” of null
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.