如何解决此“无法读取 null 的属性 'appendChild'”错误？答案

【问题标题】：How do I solve this "Cannot read property 'appendChild' of null" error?如何解决此“无法读取 null 的属性 'appendChild'”错误？
【发布时间】：2014-07-30 13:33:10
【问题描述】：

我尝试使用下面的代码，它在我的网站上的幻灯片中添加按钮：

window.onload = function loadContIcons() {
    var elem = document.createElement("img");
    elem.src = "http://arno.agnian.com/sites/all/themes/agnian/images/up.png";
    elem.setAttribute("class", "up_icon");

    var id = "views_slideshow_controls_text_next_slideshow-block";
    if (id !== 0) {
        document.getElementById(id).appendChild(elem);
    } else console.log("aaaaa");

    var elem1 = document.createElement("img");
    elem1.src = "http://arno.agnian.com/sites/all/themes/agnian/images/down.png";
    elem1.setAttribute("class", "down_icon");

    var id1 = "views_slideshow_controls_text_previous_slideshow-block";
    if (id1 !== 0) {
        document.getElementById(id1).appendChild(elem1);
    } else console.log("aaaaa");
}

在首页，我有幻灯片，一切正常，但在其他页面上出现错误Cannot read property 'appendChild' of null。

【问题讨论】：

你能发布你的网站代码吗？
我不明白该错误消息如何没有清楚地传达问题。每当其中一个 getElementById() 调用返回 null 时，您都会收到该错误。
使用 chrom 开发工具和断点进行调试。
此外，在将“id”和“id1”设置为其中一个长字符串后立即不等于零的那些测试没有意义。
与其检查id !== 0 是否永远不会为假，不如检查document.getElementById() 是否返回了什么？

标签： javascript jquery drupal

【解决方案1】：

该元素尚未附加，因此它等于 null。 Id 永远不会 = 0。当您调用 getElementById(id) 时，它为 null，因为它还不是 dom 的一部分，除非您的静态 id 已经在 DOM 上。通过控制台调用以查看它返回的内容。

【讨论】：

感谢 eg_dac，我就这样去了var k = document.getElementById("views_slideshow_controls_text_previous_slideshow-block"); if(k != null) k.appendChild(elem1);
另一个安全检查是 if(typeof k !=="undefined")

【解决方案2】：

只需重新排序或确保（DOM 或 HTML）在 JavaScript 之前加载。

【讨论】：

【解决方案3】：

您的条件id !== 0 将始终不同于零，因为您正在分配一个字符串值。在没有找到 id 为 views_slideshow_controls_text_next_slideshow-block 的元素的页面上，您仍然会尝试附加 img 元素，这会导致 Cannot read property 'appendChild' of null 错误。

您可以分配 DOM 元素并验证它是否存在于页面中，而不是分配字符串值。

window.onload = function loadContIcons() {
    var elem = document.createElement("img");
    elem.src = "http://arno.agnian.com/sites/all/themes/agnian/images/up.png";
    elem.setAttribute("class", "up_icon");

    var container = document.getElementById("views_slideshow_controls_text_next_slideshow-block");
    if (container !== null) {
        container.appendChild(elem);
    } else console.log("aaaaa");

    var elem1 = document.createElement("img");
    elem1.src = "http://arno.agnian.com/sites/all/themes/agnian/images/down.png";
    elem1.setAttribute("class", "down_icon");

    container = document.getElementById("views_slideshow_controls_text_previous_slideshow-block");
    if (container !== null) {
        container.appendChild(elem1);
    } else console.log("aaaaa");
}

【讨论】：

【解决方案4】：

对于所有面临类似问题的人，我在尝试运行特定代码 sn-p 时遇到了同样的问题，如下所示。

<html>
    <head>
        <script>
                var div, container = document.getElementById("container")
                for(var i=0;i<5;i++){
                    div = document.createElement("div");
                    div.onclick = function() { 
                        alert("This is a box #"+i);
                    };
                    container.appendChild(div);
                }
            </script>

    </head>
    <body>
        <div id="container"></div>
    </body>
 </html>

https://codepen.io/pcwanderer/pen/MMEREr

Looking at the error in the console for the above code.

由于 document.getElementById 返回 null 并且 null 没有名为 appendChild 的属性，因此会引发错误。要解决此问题，请参阅下面的代码。

<html>
    <head>
        <style>
        #container{
            height: 200px;
            width: 700px;
            background-color: red;
            margin: 10px;
        }


        div{
            height: 100px;
            width: 100px;
            background-color: purple;
            margin: 20px;
            display: inline-block;
        }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script>
                var div, container = document.getElementById("container")
                for(let i=0;i<5;i++){
                    div = document.createElement("div");
                    div.onclick = function() { 
                        alert("This is a box #"+i);
                    };
                    container.appendChild(div);
                }
            </script>
    </body>
</html>

https://codepen.io/pcwanderer/pen/pXWBQL

我希望这会有所帮助。 :)

【讨论】：