'appendChild'on 'Node':新的子元素为空

Failed to execute 'appendChild' on 'Node': The new child element is null

本文关键字：元素 appendChild on Node      更新时间：2023-09-26

这个奇怪的bug已经困扰我半个小时了。我正在动态地尝试仅使用JavaScript应用滑块。你知道我为什么会这样吗?我可以在SO上找到其他问题，但不明白解决方案。我是JS的新手，如果有人能给我解释一些外行的话，我将非常感激。这是我的代码。

标记 

<!DOCTYPE html>
<html>
<head>
    <title>JS sample test page</title>
    <link rel="stylesheet" type="text/css" href="jquery.bxslider.css">
</head>
<body>
    <div class="og-fullimg"></div>
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script type="text/javascript" src="jquery.bxslider.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
</body>
</html>
JAVASCRIPT 

// code for thumbnail slider begins
(function() {
    var ogImg = document.getElementsByClassName("og-fullimg");
    alert(ogImg.length);
    var bxSlider = document.createElement("ul"); //created ul
    bxSlider.setAttribute("class", "bxslider"); // gave a class name bxslider.
    for (i = 1; i < 4; i++) {
        var itemsList = document.createElement("li");
        var linkImages = document.createElement("img");
        linkImages.src = "images/bid_" + i + ".jpg";
        itemsList.appendChild(linkImages);
        bxSlider.appendChild(itemsList);
    }
    ogImg[0].appendChild(bxSlider);
    document.body.appendChild(ogImg); //append everything to the body.

    //call the slider.
    $(document).ready(function() {
        $('.bxslider').bxSlider({
            auto: true,
            pager: false,
            adaptiveHeight: true,
            slideWidth: 550
        });
    });
}());
// code for thumbnail slider ends.

这里有几个问题:

  1. document.body.appendChild(ogImg);是错误的。ogImg是一个nodeList。你不能直接将nodeList附加到主体，并且它已经在DOM中了(你刚刚获得了document.getElementsByClassName("og-fullimg");)。

  2. 您正在使用$(document).ready()等待调用。bxslider()，但不使用它来调用document.getElementsByClassName()。我猜你的代码运行得太快了。如果是这种情况，那么只需将所有代码放入.ready()处理程序中。

  3. 你正在使用一个非常奇怪的纯javascript和jQuery的混合切换到jQuery纯javascript可以使你的代码更小，更一致。如果你有jQuery，你也可以用它来做它擅长的事情(比如选择器和集合操作)。

我的建议是:

//create and initialize the slider.
$(document).ready(function() {
    var bxSlider = $("<ul class='bxslider'></ul>"), img;
    for (var i = 1; i < 4; i++) {
        img = new Image();
        img.src = "images/bid_" + i + ".jpg";
        $("<li>").append(img).appendTo(bxSlider);
    }
    bxSlider.appendTo(".og-fullimg");
    bxSlider.bxSlider({
        auto: true,
        pager: false,
        adaptiveHeight: true,
        slideWidth: 550
    });
});
相关文章：