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

Question

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.

The error message says it all, you're not getting the element. — adeneo, Aug 09 '14 at 07:54
Also, you're doing `document.body.appendChild(ogImg);`, but `ogImg` is already in the DOM, why do you need to append it ? — adeneo, Aug 09 '14 at 07:57
Just as a quick note `$('div')` will select all divs already in the DOM, while `$('
')` 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, Apr 20 '19 at 04:55

jfriend00 · Accepted Answer · 2014-08-09T08:10:01.857

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

Wow, I removed it according to your first suggestion and the slider works now without error(I changed document.body.appendChild(ogImg); to document.body.appendChild(bxSlider);). But I dint quite get your second point. And the whole content is going after "og-fullimg" div. I want it to be inside the div. Any thoughts? — Thomas Sebastian, Aug 09 '14 at 08:04
@ThomasSebastian - I modified the code slightly to insert the newly created bxslider content inside the `og-fullimg` element like you asked. — jfriend00, Aug 09 '14 at 08:13

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

1 Answers1

Linked