如何迭代数组，然后在 HTML 中显示所有元素？ [关闭]答案

【问题标题】：How do I iterate the array, then show all the elements in HTML? [closed]如何迭代数组，然后在 HTML 中显示所有元素？ [关闭]
【发布时间】：2022-08-13 20:34:44
【问题描述】：

我正在学习 javascript，我尽量使用正确的 \"word\" 来描述我的问题 :) 这是我的代码，现在它只能将数组的最后一项显示为 HTML，我认为 forEach 应该迭代 while 数组以使所有元素都填充到 HTML ...任何人都可以给我一些建议吗？

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

<!DOCTYPE html>
<html lang=\"en\">
  <head>
    <meta charset=\"UTF-8\" />
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />
    <title>Console demo</title>
    <script src=\"script.js\" defer></script>
  </head>
  <body></body>
</html>

如果您通过提供代码而不是图像来编辑您的问题，那就更好了！
将.innerHTML = 更改为.innerHTML += 。
我知道了！感谢您的帮助！
注：Why is \"element.innerHTML+=\" bad code?

标签： javascript dom

【解决方案1】：

正如@Rocky Sims 在cmets 中所说，将.innerHTML = 更改为.innerHTML +=

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

<ul>
</ul>

【讨论】：