JavaScript循环加载数组对象至DOM元素仅显示最后一项问题

嘿，我一眼就看出你代码里的几个关键问题，这也是很多刚接触DOM操作的开发者容易踩的坑，咱们一步步来解决：

问题根源 #

1. 重复ID是罪魁祸首：你给每个生成的.box都加了id="boxMsg"，内部的titMsg、yold这些也都是重复ID。HTML规定ID必须是页面唯一的，document.getElementById()只会返回第一个匹配的元素，所以你每次循环其实都在修改同一个初始元素，最后只有最后一次赋值生效，其他新生成的元素根本没被碰过。
2. 循环边界错误：你的循环条件是i <= dataStore.length，但数组索引从0开始，当i等于dataStore.length（也就是4）时，dataStore[i]是undefined，这会直接报错导致后续操作中断。
3. innerHTML +=的低效与风险：每次用这个方式都会重新解析整个容器的DOM，不仅性能差，还容易因为DOM还没更新完成导致元素查找失败。

修正后的方案（推荐） #

这种方式更灵活，适合后续还要单独操作这些元素的场景：

const dataStore = [
  { fname: "Keira", lname: "Mayo", yold: 30 },
  { fname: "Isaac", lname: "Moses", yold: 20 },
  { fname: "Edwina", lname: "Serena", yold: 34 },
  { fname: "Tiana", lname: "Cheryl", yold: 26 },
];

// 把模板里的ID换成类，避免重复
const boxTemplate = `
<div class="box">
  <article class="media">
    <div class="media-content">
      <div class="content">
        <p>
          <strong class="titMsg"></strong>
          <small class="yold"></small>
          <br>
        </p>
      </div>
      <nav class="level is-mobile">
        <div class="level-left">
          <a class="level-item button is-small has-background-primary has-text-light disabled" aria-label="done">Done</a>
          <a class="level-item button is-small has-background-danger has-text-light" aria-label="delete">Delete</a>
        </div>
      </nav>
    </div>
  </article>
</div>`;

const mainBox = document.getElementById("MainBox");
mainBox.innerHTML = ""; // 先清空容器，避免重复渲染

for (let i = 0; i < dataStore.length; i++) {
  // 创建临时容器解析模板
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = boxTemplate;
  const currentBox = tempDiv.firstElementChild;

  // 给当前元素赋值数据
  currentBox.querySelector(".titMsg").textContent = `${dataStore[i].fname} ${dataStore[i].lname}`;
  currentBox.querySelector(".yold").textContent = dataStore[i].yold;

  // 添加到主容器
  mainBox.appendChild(currentBox);
}

方案优势 #

• 用类代替ID，彻底避免了重复ID的问题，每个元素都是独立个体
• 使用createElement和appendChild，比innerHTML +=高效得多，不会重复解析整个DOM
• 改用let声明循环变量，避免了var的作用域提升问题（后续加异步操作也不会出问题）
• 修正了循环边界，不会出现越界报错

更简洁的方案（一次性渲染） #

如果后续不需要单独操作这些元素，直接在循环里把数据插入模板字符串，一次性渲染会更简单：

const dataStore = [
  { fname: "Keira", lname: "Mayo", yold: 30 },
  { fname: "Isaac", lname: "Moses", yold: 20 },
  { fname: "Edwina", lname: "Serena", yold: 34 },
  { fname: "Tiana", lname: "Cheryl", yold: 26 },
];

const mainBox = document.getElementById("MainBox");
let html = "";

for (let i = 0; i < dataStore.length; i++) {
  // 直接把数据嵌入模板，不需要后续修改DOM
  html += `
<div class="box">
  <article class="media">
    <div class="media-content">
      <div class="content">
        <p>
          <strong>${dataStore[i].fname} ${dataStore[i].lname}</strong>
          <small>${dataStore[i].yold}</small>
          <br>
        </p>
      </div>
      <nav class="level is-mobile">
        <div class="level-left">
          <a class="level-item button is-small has-background-primary has-text-light disabled" aria-label="done">Done</a>
          <a class="level-item button is-small has-background-danger has-text-light" aria-label="delete">Delete</a>
        </div>
      </nav>
    </div>
  </article>
</div>`;
}

mainBox.innerHTML = html;

最后提醒 #

• 永远遵守HTML规范，不要使用重复ID，这会给后续DOM操作带来各种诡异问题
• 尽量避免在循环中频繁修改innerHTML，性能损耗很大
• 优先用let/const代替var，减少作用域相关的bug

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