如何在JavaScript动态生成的div中打印迭代器i的数值

实现方法 #

你只需在拼接innerHTML字符串时嵌入迭代变量i即可，以下是两种常用写法：

方法1：普通字符串拼接（兼容所有浏览器）

直接用+运算符将变量i拼入HTML字符串中：

var d1 = document.getElementById("div1");
for (var i = 0; i < 20; i++) {
  d1.innerHTML += '<div class="box">' + i + '</div>';
}

方法2：ES6模板字符串（更简洁，支持现代浏览器）

用反引号包裹字符串，通过${变量名}的语法直接嵌入变量，无需拼接符号：

const d1 = document.getElementById("div1");
// 循环变量改用let声明，可避免后续绑定事件等异步操作时的变量提升问题
for (let i = 0; i < 20; i++) {
  d1.innerHTML += `<div class="box">${i}</div>`;
}

额外注意 #

如果后续需要给生成的.box元素绑定点击事件输出对应序号，用var声明的循环变量i会出现所有事件都输出20的问题，此时把循环变量的声明从var i改为let i即可解决。

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