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

我是JavaScript新手（一般编程），并一直在尝试获得有关使用DOM的基本知识。道歉，如果这是一个非常基本的错误，但我环顾四周，找不到答案。Javascript错误 - 无法调用方法'appendChild'null

我想使用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' 空的”

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

来源

2011-12-29 Ben

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

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

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

来源

2011-12-29 16:38:44 Tejs

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

直接在关闭</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 16:37: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); 
}

现在，您不必移动标记，因为在HTML加载完成后，它将运行您的代码。

来源

2014-02-27 21:40:32 Brendan

我添加事件侦听器等待DOM内容完全加载

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

来源

2016-09-16 03:19:14

没有加载你的DOM，所以的getElementById将返回null，使用的document.ready（）jQuery中

$(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); 

    }

来源

2017-05-09 09:10:13

因为您的JavaScript文件是先加载的，那么当您编写window.document.body.appendChild(btn),body元素未在html中加载时，这就是为什么您在这里出现错误，一旦body元素被加载到DOM中，您就可以加载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); 

    }

来源

2017-06-06 06:45:09

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

回答

相关问题