Javascript 未能执行'；追加儿童'；在'；节点'；：新的子元素为null_Javascript_Html_Bxslider

Javascript 未能执行'；追加儿童'；在'；节点'；：新的子元素为null

javascript html

Javascript 未能执行'；追加儿童'；在'；节点'；：新的子元素为null,javascript,html,bxslider,Javascript,Html,Bxslider,这只奇怪的虫子半小时以来一直在烦我。我正在动态地尝试仅使用JavaScript应用滑块。你知道我为什么会这样吗？我可以在上面找到其他问题，但无法理解解决方案。我是JS的新手，非常感谢有人能用外行的语言给我解释。这是我的密码标记 <!DOCTYPE html> <html> <head> <title>JS sample test page</title> <link rel="stylesheet" type=

这只奇怪的虫子半小时以来一直在烦我。我正在动态地尝试仅使用JavaScript应用滑块。你知道我为什么会这样吗？我可以在上面找到其他问题，但无法理解解决方案。我是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>

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


JS示例测试页面

JAVASCRIPT

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

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

//缩略图滑块的代码开始
（功能（）{
var ogImg=document.getElementsByClassName（“og fullimg”）；
警报（g.长度）；
var bxSlider=document.createElement（“ul”）；//已创建ul
setAttribute（“class”，“bxSlider”）；//给出了一个类名bxSlider。
对于（i=1；i<4；i++）{
var itemsList=document.createElement（“li”）；
var linkImages=document.createElement（“img”）；
linkImages.src=“images/bid_”+i+”.jpg”；
itemsList.appendChild（链接图像）；
bxSlider.appendChild（itemsList）；
}
ogImg[0].appendChild（bxSlider）；
document.body.appendChild（ogImg）；//将所有内容附加到正文中。
//调用滑块。
$（文档）.ready（函数（）{
$（'.bxslider'）.bxslider({
是的，
传呼机：错，
自适应高度：正确，
滑动宽度：550
});
});
}());
//缩略图滑块结束的代码。

提前感谢。

这里有几个问题：

document.body.appendChild（ogImg）是错误的ogImg
是一个nodeList
。您不能直接将nodeList
附加到主体中，它已经在DOM中（您只是通过document.getElementsByClassName（“og fullimg”）；
获得它


您正在使用$（document）.ready（）
等待调用.bxSlider（），但没有使用它调用document.getElementsByClassName（）
。我猜您的代码运行得太快了。如果是这样，那么只需将所有代码放在.ready（）
处理程序中即可
当将普通javascript切换到jQuery时，您使用的是普通javascript和jQuery的一种非常奇怪的混合，这可能会使您的代码更小、更一致。如果您有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
    });
});

//创建并初始化滑块。
$（文档）.ready（函数（）{
var bxSlider=$（“”），img；
对于（变量i=1；i<4；i++）{
img=新图像（）；
img.src=“images/bid_”+i+”.jpg”；
$（“”）.append（img.appendTo（bxSlider）；
}
bxSlider.appendTo（“.og fullimg”）；
bxSlider.bxSlider({
是的，
传呼机：错，
自适应高度：正确，
滑动宽度：550
});
});
错误消息说明了一切，您没有得到元素。此外，您正在执行document.body.appendChild（ogImg）；
，但是ogImg
已经在DOM中，为什么您需要追加它？正如一个简短说明$（'div'）
将选择DOM中已经存在的所有div，而$（''）
将创建一个新的DOM元素，您可以将其插入DOM。如果选择现有的div，则无法将其重新插入DOM。如果尝试，您将收到此错误消息。哇，我根据您的第一个建议将其删除，滑块现在可以正常工作（我更改了document.body.appendChild（ogImg）；到document.body.appendChild（bxSlider）；）。但是我不太明白你的第二点。整个内容都在“og fullimg”后面div.我希望它在div中。有什么想法吗？@ThomasSebastian-我稍微修改了代码，按照你的要求在og fullimg
元素中插入了新创建的bxslider内容。你太棒了。谢谢你的朋友。