夏日博客

A-A+

Javascript Cannot call method ‘appendChild’ of null错误

2016年01月27日 前端设计 暂无评论 阅读 6 views 次

调试过程中出现一个奇怪的错误：Uncaught TypeError: Cannot call method \'appendChild\' of null,看如下代码:

  1. <html>    
  2. <head>   
  3.     <title>JS Practice</title>     
  4. </head>   
  5. <body>   
  6.     <script src="script.js"></script>    
  7.     <div id = "main">   
  8.         <h1>Simple HTML Page</h1>   
  9.         <p>This is a very simple HTML page.</p>   
  10.         <p>It's about as basic as they come. It has: </p>   
  11.         <ul>   
  12.             <li>An H1 Tag</li>   
  13.             <li>Two paragraphs</li>   
  14.             <li>An unordered list</li>   
  15.         </ul>   
  16.     </div>   
  17.     <div id="javascript">   
  18.     </div>   
  19. </body>   
  20. </html>  

只有在谷歌浏览器出现这个错误,其他IE系列,FF,Opera都是正常,找了一下原因,js的,代码如下:

document.body.appendChild(container);

是在 body 之前运行的，这个时候，document.body 不存在，即为 null ，所以 document.body.appendChild 就会报告上面的错误。

解决方案:

把SCRIPT 代码包含到 body 里面或者放到body标签后面即可正常运行,修改后代码如下:

  1. <html>    
  2. <head>   
  3.     <title>JS Practice</title>     
  4. </head>   
  5. <body>   
  6.     <div id = "main">   
  7.         <h1>Simple HTML Page</h1>   
  8.         <p>This is a very simple HTML page.</p>   
  9.         <p>It's about as basic as they come. It has: </p>   
  10.         <ul>   
  11.             <li>An H1 Tag</li>   
  12.             <li>Two paragraphs</li>   
  13.             <li>An unordered list</li>   
  14.         </ul>   
  15.     </div>   
  16.     <div id="javascript">   
  17.     </div>   
  18.    
  19.     <!-- Now it will run after the above elements have been created -->   
  20.     <script src="script.js"></script>    
  21. </body>   
  22. </html>   

你在在gg浏览器下尝试一下会不会出现Javascript Cannot call method 'appendChild' of null错误啊,没有了吧.

标签：

给我留言