Question

我想在我的网页上显示数组中的所有图像。我可以在循环中调用img标签吗？或者，如果有人可以建议一种方法来打印阵列中的源URL的所有图像将是非常有帮助的？

<div id="wrapper"></div>
<script>
var container = document.getElementById("wrapper");
function myFunction() {
    var index;
    var urls = ["Banana.jpg", "Orange.jpg", "Apple.png", "Mango.jpg"];

    for (index = 0; index < urls.length; index++) {
         var newImage = '<img src="+url[index]+" alt="#" /> ' + index;
         container.innerHTML += newImage;
     }

}
</script>

PS：我是JS的新手

Answer 1

你真的不应该使用innerHTML += method。改为使用insertAdjacentHTML()方法。

var container = document.getElementById("wrapper");
var urls = ["Banana.jpg", "Orange.jpg", "Apple.png", "Mango.jpg"];
for( i=0; i<urls.length; i++){
  container.insertAdjacentHTML('beforeend', '<img src="'+urls[i]+'">');
}

<div id="wrapper"></div>

PS ，如果您要将此代码包装在函数中。记得打电话给这个功能。

Answer 2

首先，构建img标记的语法是错误的，请注意下面的数组不是字符串文字的标准，而是连接到它。

'<img src="'+url[index]+'" alt="#" /> '

我也会首先构建html，然后将其添加到div。

var newImages = '';
for (index = 0; index < urls.length; index++) {
     newImages += '<img src="'+url[index]+'" alt="#" /> ' + index;
 }
 container.innerHTML += newImages;

在循环中调用<img src=""/>标记

2 个答案: