调试过程中出现一个奇怪的错误:Uncaught TypeError: Cannot call method \'appendChild\' of null。
看代码
代码如下 |
|
<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>
|
只有在谷歌浏览器出现这个错误,其他IE系列,FF,Opera都是正常。
找了一下原因,js的
代码如下 |
|
document.body.appendChild(container); |
是在 body 之前运行的,这个时候,document.body 不存在,即为 null ,所以 document.body.appendChild 就会报告上面的错误。
解决方案:
把SCRIPT 代码包含到 <body></body> 里面或者放到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>
|
你在在gg浏览器下尝试一下会不会出现Javascript Cannot call method 'appendChild' of null错误啊,没有了吧。