我是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"
救命？我无法弄清楚为什么这不起作用......
Tej*_*ejs 63
假设此代码在script.js文件中,这是因为在加载HTML页面的其余部分之前javascript正在运行.
加载HTML页面时,当遇到链接资源(如javascript文件)时,它会加载该资源,执行所有可能的代码,然后继续运行该页面.所以你的代码<div>在页面加载之前就已经运行了.
将<script>标记移动到页面底部,您就不应再出现错误.或者,引入一个事件<body onload="doSomething();">,然后doSomething()在您的javascript文件中创建一个将运行这些语句的方法.
Bre*_*dan 12
有一种更简单的方法可以解决此问题.将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加载后运行您的代码.
小智 8
在元素可用之前,您的脚本正在运行.
将脚本直接放在结束</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>
| 归档时间： |
|
| 查看次数： |
94238 次 |
| 最近记录： |