如何使用document.getElementById结合innerHTML渲染带变量src的img标签？

你之前的代码错误在于误用了innerHTML.src——innerHTML是用来设置元素内部HTML内容的属性，它本身并没有src属性，你需要直接把完整的HTML字符串赋值给它。

方法一：使用ES6模板字符串（推荐，更易读） #

// 拼接包含三个图片标签的HTML字符串
const imgContent = `
  <img src="./${i}.png" width="100px" height="100px">
  <img src="./${x}.png" width="100px" height="100px">
  <img src="./${y}.png" width="100px" height="100px">
`;
// 赋值给目标元素的innerHTML
document.getElementById("myImg").innerHTML = imgContent;

方法二：使用传统字符串拼接 #

document.getElementById("myImg").innerHTML = 
  "<img src='./" + i + ".png' width='100px' height='100px'>" +
  "<img src='./" + x + ".png' width='100px' height='100px'>" +
  "<img src='./" + y + ".png' width='100px' height='100px'>";

注意事项 #

• 确保页面中存在id="myImg"的元素（比如一个<div id="myImg"></div>）
• 图片标签的属性建议加上引号，避免语法问题
• 模板字符串里的换行和空格不影响渲染，可根据需要调整

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