如何在JavaScript字符串中使用for循环变量批量生成img标签

嘿，我懂你的痛点——手动写72个<img>标签简直是浪费时间！你已经想到用循环批量生成了，只是卡在怎么把循环变量i嵌入到图片路径里对吧？别担心，有两种简单的方法能解决这个问题，我给你详细说明：

方法1：字符串拼接法（基础通用） #

这是最传统的写法，用+号把静态字符串和变量拼接起来就行。另外要注意一个小细节：你代码里的img.class得改成img.className，因为class是JavaScript的保留关键字，不能直接作为对象属性名使用。

完整代码示例：

// 处理图片
let pics = document.getElementById("pics-thumbs");
let divholder = document.createDocumentFragment();
for (let i = 1; i < 73; i++) {
  let img = document.createElement("img");
  img.className = "img-responsive"; // 修正class属性的写法
  img.src = "images/fun" + i + ".jpg"; // 拼接变量i到路径中，记得替换成你实际的图片后缀
  // 建议添加alt属性，提升页面可访问性
  img.alt = "趣味图片" + i;
  divholder.appendChild(img);
}
// 最后一次性把所有图片添加到DOM，提升性能
pics.appendChild(divholder);

方法2：模板字符串法（ES6+ 更简洁） #

如果你用的是支持ES6及以上的环境，模板字符串会让代码可读性更高。用反引号`包裹整个字符串，变量用${变量名}的形式嵌入即可：

完整代码示例：

// 处理图片
let pics = document.getElementById("pics-thumbs");
let divholder = document.createDocumentFragment();
for (let i = 1; i < 73; i++) {
  let img = document.createElement("img");
  img.className = "img-responsive";
  img.src = `images/fun${i}.jpg`; // 模板字符串嵌入变量，写法更直观
  img.alt = `趣味图片${i}`;
  divholder.appendChild(img);
}
pics.appendChild(divholder);

额外小提示 #

如果你的图片命名带有前导零（比如fun01.jpg、fun02.jpg），可以用padStart()方法自动补零：

img.src = `images/fun${i.toString().padStart(2, '0')}.jpg`;
// 当i=1时，会变成"fun01.jpg"；i=10时则是"fun10.jpg"

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