### 在插入Dom节点时script标签一定要body标签之后或者是body标签中的最后，否则会报未加载的错误Uncaught TypeError: Cannot read property 'appendChild' of null ####

首先在head中引入script标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="./js/a1.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="div1">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另外一个段落。</p>
        </div>
</body>

</html>

var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
element.appendChild(para);

会发现如下问题 ：

当script放在body标签的最后端时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="./js/a1.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="div1">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另外一个段落。</p>
        </div>
        <script type="text/javascript" src="./js/a1.js"></script>
</body>

</html>

var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
element.appendChild(para);

          ####            会发现可以运行：

posted @ 2021-08-03 18:16  不务正业的Java小白  阅读(102)  评论(0)    收藏  举报