如何使用JavaScript数组和循环在HTML div中展示多张图片

问题原因 #

• 第一段代码的核心问题是innerHTML赋值逻辑错误：你在forEach的每一轮循环都直接用=给avatar_div的innerHTML赋值，这会直接覆盖div之前的所有内容，而不是在原有内容基础上追加新的图片。循环执行到最后一次时，只会保留最后一个数组元素对应的图片，所以你只能看到最后一张。
• 第二段代码用document.write能正常运行，是因为这个API的特性就是在当前文档流的末尾追加写入内容，不会覆盖之前已经写入的内容，所以所有图片都会依次展示。不过不推荐在页面加载完成后使用document.write，会清空原有文档内容。

修改建议 #

方案1：简单修改赋值逻辑 #

把=改成+=即可，每次循环都把新的图片标签追加到原有内容后面：

array1.forEach( element => {
  const image = `<img src="avatar/${element}" alt="头像选项">`;
  document.getElementById('avatar_div').innerHTML += image;
});

方案2（性能更优）：先拼接所有HTML字符串，再一次性赋值 #

频繁操作DOM会影响渲染性能，先把所有图片标签拼接成一个完整的字符串，最后只给innerHTML赋值一次：

let htmlStr = '';
array1.forEach( element => {
  htmlStr += `<img src="avatar/${element}" alt="头像选项">`;
});
document.getElementById('avatar_div').innerHTML = htmlStr;

方案3（安全性更高）：用DOM API创建元素追加 #

如果头像文件名存在用户可控的内容，直接拼接HTML可能有XSS注入风险，用原生DOM方法创建元素更安全：

const avatarContainer = document.getElementById('avatar_div');
array1.forEach( element => {
  const img = document.createElement('img');
  img.src = `avatar/${element}`;
  img.alt = '头像选项';
  avatarContainer.appendChild(img);
});

内容的提问来源于stack exchange，提问作者Tom_Mouse