Joh*_*man 121 javascript google-chrome
这是我的简短HTML文档.
为什么Chrome控制台会注意到此错误:
"未捕获的TypeError:无法调用方法'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>
Ser*_*sev 164
此时尚未确定身体.通常,您希望在执行使用这些元素的javascript之前创建所有元素.在这种情况下,您在head使用的部分中有一些javascript 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>
见演示.
Jos*_*ier 31
在body元素加载之前,您的脚本正在执行.
有几种方法可以解决这个问题.
将您的逻辑包装在事件监听器中DOMContentLoaded.
这样做时,将在body元素加载时执行回调.
document.addEventListener('DOMContentLoaded', function () {
// ...
// Place code here.
// ...
});
根据您的需要,您也可以将load事件侦听器附加到window对象:
window.addEventListener('load', function () {
// ...
// Place code here.
// ...
});
有关DOMContentLoaded和load事件之间的区别,请参阅此问题.
<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事件中.接受的答案正确地显示了这一点,但是在撰写本文时,该答案以及所有其他答案也建议将脚本标记放在结束标记之后,.
这不是有效的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>
| 归档时间： |
|
| 查看次数： |
104603 次 |
| 最近记录： |