logo标签列表

Javascript错误 - 无法调用空对象的appendChild方法

javascript
34

我刚开始学习JavaScript（和编程），一直在努力理解如何处理DOM。如果这个问题非常基础的话，那我向您道歉，但我已经搜索了很多地方，没有找到答案。

我正在尝试使用appendChild方法将标题和一些段落文本添加到下面这个非常基本的HTML文件中的<body>标签中。

    <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>

以下是 JavaScript 代码:

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方法"

求助？我无法弄清楚为什么这不起作用...

6个回答
65
假设这段代码位于script.js文件中，原因是JavaScript在HTML页面加载之前就已经运行了。当一个HTML页面加载时，当它遇到类似JavaScript文件的链接资源时，它会加载该资源，执行所有可执行的代码，然后继续运行该页面。所以你的代码在页面加载<div>之前就已经运行了。
将<script>标签移动到页面底部，你就不再会有这个错误。或者引入一个事件，例如<body onload="doSomething();">，然后在你的JavaScript文件中创建一个doSomething()方法来运行那些语句。
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); 
}

现在，你不必移动你的<script>标签，因为这会使你的代码在HTML加载后运行。

9

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

请将你的脚本直接放置在闭合的 </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>
1
我添加了一个事件监听器来等待DOM内容完全加载。
document.addEventListener("DOMContentLoaded", function() {
    place_the_code_you_want_to_run_after_page_load
})
1
你的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); 

   }
0
因为你的 JavaScript 文件是最先加载的，当你写下 window.document.body.appendChild(btn) 时，body 元素还没有在 HTML 中加载，这就是为什么你会在这里遇到错误，你可以在 DOM 中加载 body 元素后再加载 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);

  }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接