我该如何解决？ “未捕获的TypeError：无法读取null的属性'appendChild'”

Question

    <!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>

what's the problem of this? Uncaught TypeError: Cannot read property.

Answer 1

您需要在将任何子元素附加到DOM之前将元素附加到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

无法读取null的属性'appendChild'

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

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

<body>
 // DOM elements

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

要么

把它放在window.onload

我该如何解决？ “未捕获的TypeError：无法读取null的属性'appendChild'”

问题描述

2 个解决方案

解决方案1
1 2016-05-10 09:13:00

解决方案2
1 2016-05-10 09:15:22

我该如何解决？ “未捕获的TypeError：无法读取null的属性&#39;appendChild&#39;”

问题描述

2 个解决方案

解决方案1 1 2016-05-10 09:13:00

解决方案2 1 2016-05-10 09:15:22

我该如何解决？ “未捕获的TypeError：无法读取null的属性'appendChild'”

解决方案1
1 2016-05-10 09:13:00

解决方案2
1 2016-05-10 09:15:22