如何使用javascript的数组和循环在html div中显示多个图像

Question

我想在HTML<div>中显示多个图像，以便用户可以选择为他们的个人资料选择'头像'。我已经写了这个javascript，但是它只显示数组中的最后一个图像。

const array1 =[
"Multiavatar1.png",
"Multiavatar2.png", "Multiavatar3.png", "Multiavatar4.png", "Multiavatar5.png", "Multiavatar6.png", "Multiavatar7.png", "Multiavatar8.png", "Multiavatar9.png", "Multiavatar10.png", "Multiavatar11.png", "Multiavatar12.png", "Multiavatar13.png", "Multiavatar14.png", "Multiavatar15.png", "Multiavatar16.png", "Multiavatar17.png", "Multiavatar18.png", "Multiavatar19.png", "Multiavatar20.png", "Multiavatar21.png", "Multiavatar22.png", "Multiavatar23.png", "Multiavatar24.png", "Multiavatar25.png", "Multiavatar26.png", "Multiavatar27.png", "Multiavatar28.png", "Multiavatar29.png", "Multiavatar30.png", "Multiavatar31.png", "Multiavatar32.png", "Multiavatar33.png", "Multiavatar34.png", "Multiavatar35.png", "Multiavatar36.png", "Multiavatar37.png", "Multiavatar38.png", "Multiavatar39.png", "Multiavatar40.png", "Multiavatar41.png", "Multiavatar42.png",
];
array1.forEach( element => {
var image = `<img src="avatar/${element}" alt="img">`;
document.getElementById('avatar_div').innerHTML = image;
}); 

但显然我尝试使用下面的脚本在一个单独的文件，这工作。

const array1 =[                             "Multiavatar1.png",
"Multiavatar2.png",
"Multiavatar3.png",
"Multiavatar4.png", "Multiavatar5.png", "Multiavatar6.png", "Multiavatar7.png", "Multiavatar8.png", "Multiavatar9.png", "Multiavatar10.png", "Multiavatar11.png", "Multiavatar12.png", "Multiavatar13.png", "Multiavatar14.png", "Multiavatar15.png", "Multiavatar16.png", "Multiavatar17.png", "Multiavatar18.png", "Multiavatar19.png", "Multiavatar20.png", "Multiavatar21.png", "Multiavatar22.png", "Multiavatar23.png", "Multiavatar24.png", "Multiavatar25.png", "Multiavatar26.png", "Multiavatar27.png", "Multiavatar28.png", "Multiavatar29.png", "Multiavatar30.png", "Multiavatar31.png", "Multiavatar32.png", "Multiavatar33.png", "Multiavatar34.png", "Multiavatar35.png", "Multiavatar36.png", "Multiavatar37.png", "Multiavatar38.png", "Multiavatar39.png", "Multiavatar40.png", "Multiavatar41.png", "Multiavatar42.png",
];
array1.forEach( element => {

var h = `<img src="avatar/${element}" alt="img"><br>`;

document.write(h);
});

谁能给我解释一下，我是什么第一个脚本我写错了。

和建议我的代码工作?

Answer 1

第一个示例不能工作，因为您覆盖了前面的HTML。

第二个示例可以正常工作，因为document.write附加了HTML。

为了使第一个示例工作，使用+=(加法赋值运算符)代替=:

const array1 = [
"Multiavatar1.png",
"Multiavatar2.png", "Multiavatar3.png", "Multiavatar4.png", "Multiavatar5.png", "Multiavatar6.png", "Multiavatar7.png", "Multiavatar8.png", "Multiavatar9.png", "Multiavatar10.png", "Multiavatar11.png", "Multiavatar12.png", "Multiavatar13.png", "Multiavatar14.png", "Multiavatar15.png", "Multiavatar16.png", "Multiavatar17.png", "Multiavatar18.png", "Multiavatar19.png", "Multiavatar20.png", "Multiavatar21.png", "Multiavatar22.png", "Multiavatar23.png", "Multiavatar24.png", "Multiavatar25.png", "Multiavatar26.png", "Multiavatar27.png", "Multiavatar28.png", "Multiavatar29.png", "Multiavatar30.png", "Multiavatar31.png", "Multiavatar32.png", "Multiavatar33.png", "Multiavatar34.png", "Multiavatar35.png", "Multiavatar36.png", "Multiavatar37.png", "Multiavatar38.png", "Multiavatar39.png", "Multiavatar40.png", "Multiavatar41.png", "Multiavatar42.png",
];
array1.forEach(element => {
var image = `<img src="avatar/${element}" alt="img">`;
document.getElementById('avatar_div').innerHTML += image;
});

演示:

const array1 = [
"https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1",
"https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1"
];
array1.forEach(element => {
var image = ` <img src = "${element}" alt = "img">`;
document.getElementById('avatar_div').innerHTML += image;
});
``

<div id="avatar_div"></div>