Question

我正在研究一些JavaScript，并试图动态添加内容。以下是我的代码。我的问题是我正在尝试添加三个＆＃34; li＆＃34;元素，附加＆＃34; img＆＃34;标签，并动态附加src。但它只附加了最后一张图片，即我的代码＆＃34; bid_3＆＃34;所有的＆＃34; li＆＃34;。帮助赞赏。

(function() {
    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);
    document.body.appendChild(bxSlider); //append everything to the body.

    var ulNum = document.getElementsByTagName("ul");
    alert(ulNum.length); // should return 1
    var liNum = document.getElementsByTagName("li");
    alert(liNum.length); // should return 3
    var imgNum = document.getElementsByTagName("img");
    alert(imgNum.length); //should return 3

    //call the slider.
    $(document).ready(function() {
        $('.bxslider').bxSlider();
    });

}());

PS： - 我不是JavaScript专家。如果我的代码不好，请原谅。

Answer 1

在您通过循环后，您只需附加itemsList。试试这个：

// Before loop stuff...
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);
}
// After loop stuff...

使用循环，但只添加了一个元素

1 个答案: