如何遍历JavaScript数组并在HTML中显示全部元素？代码问题求助

算力阿峰

2026-8-22

问题原因

你遇到的核心问题是：每次forEach循环时，都通过innerHTML =直接替换了<body>的全部内容，而非追加新元素。每一轮循环都会覆盖掉之前生成的<li>，最终页面只保留最后一次循环的结果。

解决方案

以下是几种可行的修复方式，按推荐度排序：

1. 创建DOM元素并追加（性能最优）

直接创建<li>元素再插入到页面，避免重复解析整个DOM结构，适合大多数场景：

const backpackContents = ["piggy", "headlamp", "pen"];
const body = document.querySelector("body");

backpackContents.forEach(function (item) {
  const li = document.createElement("li");
  li.textContent = item;
  body.appendChild(li);
});

2. 一次性生成完整HTML插入（简洁高效）

用map将数组元素转为<li>字符串，拼接后一次性赋值给innerHTML，仅操作DOM一次：

const backpackContents = ["piggy", "headlamp", "pen"];
// 推荐包裹在<ul>里，符合HTML语义化
const listHtml = `<ul>${backpackContents.map(item => `<li>${item}</li>`).join('')}</ul>`;

document.querySelector("body").innerHTML = listHtml;

3. 使用`innerHTML +=`追加（简单但性能一般）

将赋值改为累加操作，每次在原有内容后追加新的<li>，适合小体量数组：

const backpackContents = ["piggy", "headlamp", "pen"];
backpackContents.forEach(function (item) {
  document.querySelector("body").innerHTML += `<li>${item}</li>`;
});