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标记内，但解析此行时，text在DOM中根本不存在

因此，您可以将整个脚本放在body

的结束标记附近

<body>
 // DOM elements

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

或

将其放在window.onload

中

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

2 个答案: