这是我的简短 HTML 文档。
为什么 Chrome 控制台会注意到这个错误：
“未捕获的类型错误：无法调用“的方法‘appendChild’
null？
<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 之前创建所有元素。在这种情况下，您在head使用body. 不酷。
你想在一个包装这个代码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元素加载之前正在执行。
有几种方法可以解决此问题。
将您的逻辑包装在事件侦听器中DOMContentLoaded。
这样做时，回调将在body元素加载时执行。
document.addEventListener('DOMContentLoaded', function () {
// ...
// Place code here.
// ...
});
根据您的需要，您也可以将load事件侦听器附加到window对象：
window.addEventListener('load', function () {
// ...
// Place code here.
// ...
});
有关 theDOMContentLoaded和loadevents之间的区别，请参阅此问题。
<script>元素的位置，最后加载 JavaScript：现在，您的<script>元素正在加载到<head>文档的元素中。这意味着它将在body加载之前执行。Google 开发人员建议将<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 事件。接受的答案正确地显示了这一点，但是该答案以及撰写本文时的所有其他答案也建议将 script 标签放在结束正文标签之后。
这不是有效的 html。但是它会导致您的代码工作，因为浏览器太友好了 ;)
有关详细信息，请参阅此答案 将 <script> 标记放在 </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 之后，例如：
<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>
浏览器自上而下解析您的 html，您的脚本在加载正文之前运行。修复将脚本放在正文之后。
<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>