开发者问题收集

Javascript 错误 - 无法调用 null 的方法“appendChild”

2011-12-29
102949
javascript

我是 Javascript 的新手（编程也一样），一直在尝试掌握 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);

运行它会导致错误：“无法调用 null 的方法‘appendChild’”

帮忙？我不明白为什么它不起作用……

3个回答

假设此代码位于 script.js 文件中，这是因为 JavaScript 在 HTML 页面的其余部分加载之前运行。

当 HTML 页面加载时，当它遇到链接资源（例如 JavaScript 文件）时，它会加载该资源，执行所有可以执行的代码，然后继续运行页面。因此，您的代码在 <div> 加载到页面上之前运行。

将您的 <script> 标记移动到页面底部，您应该不会再出现错误。或者，引入一个事件（例如 <body onload="doSomething();"> ），然后在您的 JavaScript 文件中创建一个 doSomething() 方法，该方法将运行这些语句。

Tejs
2011-12-29

有一种更简单的方法可以解决此问题。将您的 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 加载后运行您的代码。

Brendan
2014-02-27

您的脚本在元素可用之前运行。

将脚本直接放置在结束 </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