Question

我只想要一个for循环来打印相同的图像10次而不需要手动创建10个，因为我可能想稍后追加。我在其他项目中使用了这个完全相同的代码并且它已经工作但是由于某种原因它这次不起作用。

图片html是：

<img id = "crate" src="img/Acrate.png"/>

这是我的代码：

function drawCrates (){
                        for(i = 0; i < 10; i++){
                            var crate_img = document.createElement("IMG");
                            crate_img.setAttribute("src", "images/Acrate.png");
                            document.getElementById("crate").appendChild(crate_img);
                        }
}
drawCrates();

Answer 1

我建议使用DocumentFragment来提高速度，然后根据需要克隆节点。代码如下所示：

function drawCrates (){
    var fragment = document.createDocumentFragment(),
        img = document.createElement('img');

    img.setAttribute("src", "images/Acrate.png");
    fragment.appendChild(img);
    for(i = 0; i < 9; i++){
        fragment.appendChild(img.cloneNode(true));
    }

    document.body.appendChild(fragment);
}
drawCrates();

您的问题源于尝试将元素附加为<img>元素的子元素，该元素无效。您拥有的代码：

<img id="crate" ... />

当您运行代码document.getElementById("crate")时，您正在抓取<img>元素，并且无法将子元素附加到<img>。

Answer 2

您需要将图像元素附加到可以容纳其他元素的元素。试试这个，

HTML：

<div id="imageDiv">
</div>

javaScript：

function drawCrates (){
    for(i = 0; i < 10; i++){
        var crate_img = document.createElement("IMG");
        crate_img.setAttribute("src", "https://lh5.googleusercontent.com/-PfTrZFQ8c4U/AAAAAAAAAAI/AAAAAAAAAA0/IJXxoIqKNSU/photo.jpg");
        document.getElementById("imageDiv").appendChild(crate_img);
    }
}
drawCrates();

jsFiddle

使用for循环在Javascript中附加多个图像

2 个答案: