Question

我该如何解决这个“无法读取 null 的属性‘appendChild’”错误？

2014-07-30

129350

javascript jquery drupal

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

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");
}

在首页上，我有幻灯片，一切运行良好，但在其他页面上，出现错误 无法读取 null 的属性“appendChild” 。

Answer 1

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

Answer 2

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

Arun Prasad E S

2017-10-23

Answer 3

您的条件 id !== 0 将始终不同于零，因为您分配的是字符串值。在未找到 id 为 views_slideshow_controls_text_next_slideshow-block 的元素的页面上，您仍将尝试附加 img 元素，这会导致 无法读取 null 的属性“appendChild” 错误。

您可以分配 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");
}