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

This weird bug is bugging me from half an hour. I am dynamically trying to apply a slider using only JavaScript. Any idea as to why this is occurring to me? I could find other questions on SO, but could not understand the solution. I am new to JS and highly appreciate if someone could explain me things in laymen terms. Here is my code.

MARKUP

<!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.

Thanks in advance.

MARKUP

<!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.

Thanks in advance.

Share Improve this question edited Nov 13, 2016 at 19:01 asked Aug 9, 2014 at 7:54 Thomas Sebastian 1,6125 gold badges21 silver badges40 bronze badges

The error message says it all, you're not getting the element. – adeneo Commented Aug 9, 2014 at 7:54
2 Also, you're doing document.body.appendChild(ogImg);, but ogImg is already in the DOM, why do you need to append it ? – adeneo Commented Aug 9, 2014 at 7:57
Just as a quick note $('div') will select all divs already in the DOM, while $('<div/>') will create a new DOM element that you can insert into the DOM. If you select existing divs, then you can't re-insert them into the DOM. If you try you'll get this error message. – Dallas Clarke Commented Apr 20, 2019 at 4:55

Add a comment |

1 Answer 1

Sorted by: Reset to default 11

Several issues here:

document.body.appendChild(ogImg); is just wrong. ogImg is a nodeList. You can't directly append a nodeList to the body AND it's already in the DOM (you just got it with document.getElementsByClassName("og-fullimg");.
You are using $(document).ready() to wait to call .bxSlider(), but NOT using it to call document.getElementsByClassName(). My guess would be your code is just running too soon. If that is the case, then just put all your code inside the .ready() handler.
You're using a very odd mix of plain javascript and jQuery when switching the plain javascript over to jQuery could make your code smaller and more consistent. If you have jQuery, you may as well use it for what it's good at (which is selectors and operations on collections - among other things).

This is what I'd suggest:

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Failed to execute 'appendChild' on 'Node': The new child element is null - Stack Ov

1 Answer 1

与本文相关的文章

评论列表(0)