Question

好的，我有一个文字数组，其中有一些图像。我有一个空的DIV，其中将执行FOR LOOP以显示div中数组中的所有图像。

var icons = [
    '<img src="images/1.png" width="30" height="30"/>',
    '<img src="images/2.png" width="30" height="30"/>',
    '<img src="images/3.png" width="30" height="30"/>'
    ];

    var lol = document.getElementById("div");

    for (var i=0; i<icons.length; i++) {
            lol.innerHTML = icons[i] ;
        }

问题是只显示最后一张图片...

Answer 1

这是因为您使用当前图像覆盖了上一个图像。如果要附加/连接所有图像，请使用+=：

lol.innerHTML += icons[i];

处理此问题的更好方法是使用DOM处理：

var img = document.createElement("img");
img.setAttribute("src", icons[i]);

lol.appendChild(img);

Answer 2

每次你做

lol.innerHTML = icons[i];

您使用icons[i] 替换 div的内部HTML。连接所有图标元素，然后使用连接结果设置div的内部HTML。

Answer 3

你的代码会覆盖你可以附加innerHTML的innerHTML

试试这个

lol.innerHTML += icons[i];

以上代码附加了innerHTML

或在jquery中你可以使用追加函数

$('#div').append(icons[i]);

循环和数组问题

3 个答案: