Javascript 错误 - 无法调用 null 的方法“appendChild”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8670530/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript error - cannot call method 'appendChild' of null
提问by Ben
I am new to Javascript (and programming in general) and have been trying to get a basic grasp on working with the DOM. Apologies if this is a very basic mistake, but I looked around and couldn't find an answer.
我是 Javascript（以及一般编程）的新手，并且一直在尝试基本掌握使用 DOM。如果这是一个非常基本的错误，我深表歉意，但我环顾四周并找不到答案。
I am trying to use the appendChild method to add a heading and some paragraph text into the in the very basic HTML file below.
我正在尝试使用 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>
Here is the js code:
下面是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);
Running it causes an error: "Cannot call method 'appendChild' of null"
运行它会导致错误：“无法调用 null 的方法 'appendChild'”
Help? I can't figure out why this isn't working...
帮助？我不明白为什么这不起作用......
回答by Tejs
Assuming this code is inside the script.jsfile, this is because the javascript is running before the rest of the HTML page has loaded.
假设此代码在script.js文件中，这是因为 javascript 在 HTML 页面的其余部分加载之前正在运行。
When an HTML page loads, when it comes across a linked resource such as a javascript file, it loads that resource, executes all code it can, and then continues running the page. So your code is running before the <div>is loaded on the page.
当 HTML 页面加载时，当它遇到链接资源（例如 javascript 文件）时，它会加载该资源，执行所有可以执行的代码，然后继续运行该页面。所以你的代码<div>在页面加载之前运行。
Move your <script>tag to the bottom of the page and you should no longer have the error. Alternatively, introduce an event such as <body onload="doSomething();">and then make a doSomething()method in your javascript file which will run those statements.
将您的<script>标签移动到页面底部，您应该不再有错误。或者，引入一个事件<body onload="doSomething();">，然后doSomething()在您的 javascript 文件中创建一个将运行这些语句的方法。
回答by Brendan
There is an easier way to resolve this issue. Put your JavaScript inside of a function and use the window.onload. So for instance:
有一种更简单的方法可以解决此问题。将您的 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);
}
Now, you do not have to move your tag because that will run your code after the HTML has loaded.
现在，您不必移动您的标签，因为这将在 HTML 加载后运行您的代码。
回答by Brendan
Your script is running before the elements are available.
您的脚本在元素可用之前运行。
Place your script directly before the closing </body>tag.
将您的脚本直接放在结束</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>
回答by Eric Hebel
I add an event listener to wait for DOM content to fully load
我添加了一个事件监听器来等待 DOM 内容完全加载
document.addEventListener("DOMContentLoaded", function() {
place_the_code_you_want_to_run_after_page_load
})
回答by Ignatius Andrew
Your DOM is not loaded, so getElementByIdwill return null, use document.ready()in jquery
您的 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);
}
回答by sunny rai
Because your JavaScript file is loaded first, and that time when you write window.document.body.appendChild(btn), bodyelement is not loaded in html, that's why you are getting error here, you can load the js file once body element is loaded in DOM.
因为你的 JavaScript 文件是先加载的，而那个时候你写的window.document.body.appendChild(btn),body元素没有加载到 html 中，这就是你在这里得到错误的原因，一旦 body 元素加载到 DOM 中，你就可以加载 js 文件。
index.html
索引.html
<html>
<head>
<script src="JavaScript.js"></script>
</head>
<body onload="init()">
<h3> button will come here</h3>
</body>
</html>
JavaScript.js
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);
}
