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

IT技术 javascript
2021-02-19 08:29:57

我是 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'”

帮助？我不明白为什么这不起作用......

6个回答

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

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

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

有一种更简单的方法可以解决此问题。将您的 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 未加载，因此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); 

   }

我添加了一个事件监听器来等待 DOM 内容完全加载 

document.addEventListener("DOMContentLoaded", function() {
    place_the_code_you_want_to_run_after_page_load
})
其它你可能感兴趣的问题
上一篇正则表达式货币验证 下一篇为什么我必须为 React 组件类中定义的方法使用 .bind(this) 而不是在常规 ES6 类中