Question

我该如何解决这个问题？“未捕获 TypeError：无法读取 null 的属性‘appendChild’”

2016-05-10

3488

javascript

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <script>  
      var paragraph = document.createElement("p");    
      var text = document.createTextNode("Boom it is me");    
      paragraph.appendChild(text);
      var element = document.getElementById('text')

     element.appendChild(text);
     </script>        
    </head>
    <body>
    <style>
    #text{
        color: green;
    }
    </style>
    <p>Some text</p>
    <div id="text">
    <p>Some text2</p>
    </div>
    </body>
    </html>

这是什么问题？Uncaught TypeError: Cannot read property.

Answer 1

您需要先将元素附加到 DOM，然后再向其附加任何子元素。

在

paragraph.appendChild(text);

之前添加此行

document.body.appendChild(paragraph);

此外，您需要在文档对象可用于 DOM 操作时执行这些操作（文档准备就绪后或窗口加载后）

window.onload = function(){
  var paragraph = document.createElement("p");
  document.body.appendChild(paragraph);
  var text = document.createTextNode("Boom it is me");
  paragraph.appendChild(text);
  var element = document.getElementById('text')
  element.appendChild(text);
};

Answer 2

Cannot read property 'appendChild' of null”

这是因为 var element = document.getElementById('text') 位于 head 标记内，但是解析此行时 text 根本不存在于 DOM 中

因此，您可以将整个脚本放在 body 的结束标记附近

<body>
 // DOM elements

<script>
// your code
</script>
</body>

或

将其放在 window.onload 内