如何使用JavaScript将数组内容输出为垂直列表？

现有代码问题 #

• forEach循环中每次直接对innerHTML执行赋值操作，新内容会覆盖上一次循环写入的内容，最终只能看到最后一次的执行结果
• 赋值时使用了整个数组days进行拼接，不是遍历到的单个日期元素

解决方案 #

方案1：最小改动（无需修改HTML） #

只调整JS逻辑，先拼接所有要渲染的内容再一次性写入DOM：

function showdays() {
  const days = ["Sun", "Mon", "Tue", "Wed", "Thurs", "Fri", "Sat"];
  let content = "";
  days.forEach(function (dayItem) {
    content += dayItem + "<br>";
  });
  document.getElementById("showdayspid").innerHTML = content;
}

方案2：语义化列表实现（更推荐） #

用标准无序列表实现垂直排列，语义更清晰，后续调整样式也更方便：

修改后HTML

<div id="weekdivid">
  <h3>Days in a week</h3>
  <button onclick="showdays()">Show days</button>
  <ul id="daysContainer"></ul>
</div>

修改后JS

function showdays() {
  const days = ["Sun", "Mon", "Tue", "Wed", "Thurs", "Fri", "Sat"];
  const container = document.getElementById("daysContainer");
  // 清空已有内容，避免多次点击重复追加
  container.innerHTML = "";
  days.forEach(function (dayItem) {
    const li = document.createElement("li");
    li.textContent = dayItem;
    container.appendChild(li);
  });
}

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