为什么document.body null在我的JavaScript？
这是我简短的HTML文档。
为什么Chrome控制台注意到这个错误：
“Uncaught TypeError：不能调用方法'
null'的方法'appendChild'？
<html> <head> <title>Javascript Tests</title> <script type="text/javascript"> var mySpan = document.createElement("span"); mySpan.innerHTML = "This is my span!"; mySpan.style.color = "red"; document.body.appendChild(mySpan); alert("Why does the span change after this alert? Not before?"); </script> </head> <body> </body> </html>
目前还没有确定机构的定义。 一般来说，在执行使用这些元素的javascript之前，您需要创build所有元素。 在这种情况下，您在使用body的head部分有一些javascript。 不爽。
你想把这个代码包装在一个window.onload处理程序中，或者把它放在<body>标签之后（如e-bacho 2.0所提到的）。
<head> <title>Javascript Tests</title> <script type="text/javascript"> window.onload = function() { var mySpan = document.createElement("span"); mySpan.innerHTML = "This is my span!"; mySpan.style.color = "red"; document.body.appendChild(mySpan); alert("Why does the span change after this alert? Not before?"); } </script> </head>
看演示 。
在body元素甚至被加载之前，脚本正在被执行。
有几种方法可以解决这个问题。
-
将代码包装在DOM Loadcallback中：
将您的逻辑
DOMContentLoaded在DOMContentLoaded的事件侦听器中。这样做，callback将在
body元素加载时执行。document.addEventListener('DOMContentLoaded', function () { // ... // Place code here. // ... });根据您的需要，您可以select将
load事件侦听器附加到window对象：window.addEventListener('load', function () { // ... // Place code here. // ... });有关
DOMContentLoaded与load事件之间的区别， 请参阅此问题 。 -
移动
<script>元素的位置，并最后加载JavaScript：现在，你的
<script>元素被加载到文档的<head>元素中。 这意味着它将在body加载之前执行。 Google开发人员build议将<script>标记移动到页面末尾，以便在处理JavaScript之前呈现所有HTML内容。<!DOCTYPE html> <html> <head></head> <body> <p>Some paragraph</p> <!-- End of HTML content in the body tag --> <script> <!-- Place your script tags here. --> </script> </body> </html>
将您的代码添加到onload事件。 被接受的答案正确地表明了这一点，但是在撰写本文的时候，这个答案以及所有其他答案也build议把脚本标签放在closures的身体标签之后。
这是无效的HTML。 但是，它会导致你的代码工作，因为浏览器太仁慈了;）
请参阅此答案以获取更多信息将<script>标记放在</ body>标记之后是错误的吗？
由于这个原因downvoted其他答案。
或者添加这个部分
<script type="text/javascript"> var mySpan = document.createElement("span"); mySpan.innerHTML = "This is my span!"; mySpan.style.color = "red"; document.body.appendChild(mySpan); alert("Why does the span change after this alert? Not before?"); </script>
之后的HTML，如：
<html> <head>...</head> <body>...</body> <script type="text/javascript"> var mySpan = document.createElement("span"); mySpan.innerHTML = "This is my span!"; mySpan.style.color = "red"; document.body.appendChild(mySpan); alert("Why does the span change after this alert? Not before?"); </script> </html>
浏览器从上到下parsing你的html，你的脚本在body加载之前运行。 修正放在身后的脚本。
<html> <head> <title> Javascript Tests </title> </head> <body> </body> <script type="text/javascript"> var mySpan = document.createElement("span"); mySpan.innerHTML = "This is my span!"; mySpan.style.color = "red"; document.body.appendChild(mySpan); alert("Why does the span change after this alert? Not before?"); </script> </html>
代码运行时， document.body还不可用。
你可以做什么，而不是：
var docBody=document.getElementsByTagName("body")[0]; docBody.appendChild(mySpan);
