JavaScript通过for循环从数组批量创建HTML元素的正确实现方式

关于变量声明的疑问 #

不需要为每个要渲染的DOM元素单独声明独立的JS变量，循环内重复覆盖同一个块级作用域的局部变量完全可行。每次循环创建的DOM元素只要被挂载到DOM树中，就不会随局部变量的覆盖或销毁消失。

你的代码错误原因 #

第一段代码仅输出一个元素的核心问题 #

• 错误使用jQuery选择器：你将局部变量tabElementLink写在引号中作为选择器使用$("tabElementLink")，这行代码实际是查找页面里标签名为tabElementLink的元素，该元素不存在所以append操作完全失效。
• 类名重复赋值：连续两次对className赋值，后一次会直接覆盖前一次的取值，最终元素仅保留ellipsis类，丢失tabElement类。

第二段代码所有innerHTML相同的问题 #

你提供的这段代码的DOM生成逻辑本身没有错误，出现所有innerHTML一致的问题优先检查你的events数据源，确认数组中每个元素的name属性是否确实互不相同。该段代码同样存在上述的类名重复覆盖问题。

正确实现代码 #

// 循环可以直接用块级作用域的i，不需要提前声明
for (let i = 0; i < events.length; i++) {
  // 创建div元素，循环内的局部变量每次循环都会重新初始化
  const tabElement = document.createElement("div");
  // 同时设置多个类名可以用空格拼接，或者用classList.add添加
  tabElement.className = "tabElement ellipsis";
  tabElement.id = "tabElement" + i;
  tabElement.innerHTML = events[i].name;

  // 创建a标签元素
  const tabElementLink = document.createElement("a");
  tabElementLink.className = "tabElementLink";
  tabElementLink.id = "tabElementLink" + i;
  // 直接用局部变量append，不需要用jQuery选择器查找
  tabElementLink.append(tabElement);
  // 挂载到tabBar容器
  $(".tabBar").append(tabElementLink);
}

如果需要后续操作生成的元素，可以在循环内直接绑定事件，或者通过id、类选择器后续查找即可，不需要额外用对象存储所有元素变量，除非你有频繁操作所有元素的需求。

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