Question

我是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);

运行它会导致错误：“无法调用方法'appendChild'为null”

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

Answer 1

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

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

将您的<script>标记移至页面底部，您不应再出现错误。或者，引入诸如<body onload="doSomething();">之类的事件，然后在您的javascript文件中生成doSomething()方法，该方法将运行这些语句。

Answer 2

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

Answer 3

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

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

Answer 4

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

document.addEventListener("DOMContentLoaded", function() {
    place_the_code_you_want_to_run_after_page_load
})

Answer 5

您的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); 

   }

Answer 6

因为您的JavaScript文件首先加载，而且当您编写once = TRUE时，window.document.body.appendChild(btn)元素未加载到html中，这就是您在此处收到错误的原因，您可以加载一旦body元素加载到DOM中，js文件。

<强>的index.html

body

<强> JavaScript.js

<html>
     <head>
         <script src="JavaScript.js"></script>      
     </head>
     <body onload="init()">
          <h3> button will come here</h3>
     </body>
</html>

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

6 个答案: