如何在 DOM 中正确遍历数组并为每个元素创建独立的 HTML 元素-html教程-PHP中文网

如何在 DOM 中正确遍历数组并为每个元素创建独立的 HTML 元素

本文详解如何避免复用同一 DOM 元素导致内容被覆盖的问题，通过在循环中动态创建新元素，实现将数组每一项（如调味料）渲染为独立的并正确追加到页面中。

本文详解如何避免复用同一 dom 元素导致内容被覆盖的问题，通过在循环中动态创建新元素，实现将数组每一项（如调味料）渲染为独立的 `

` 并正确追加到页面中。

在前端开发中，将数组数据动态渲染到页面是常见需求。但一个典型误区是：在循环外部预先创建一个 DOM 元素，然后在循环内反复修改并追加它——这会导致该元素被多次移动（而非复制），最终仅保留在 DOM 树的最后一个位置，且 textContent 被不断覆盖，结果只显示数组末尾项（如示例中的 "Relish"）。

根本原因在于：DOM 节点是引用类型。当你调用 topingsDiv.appendChild(condimentsNewDiv) 时，若 condimentsNewDiv 已存在于文档中，浏览器会先将其从原位置移除，再插入到新位置。因此三次循环实际只是把同一个

在 topingsDiv 内反复“搬家”，最后一次赋值 textContent = 'Relish' 后，DOM 中仅剩一个元素。

✅ 正确做法是：每次迭代都创建全新的 DOM 元素。以下是优化后的完整实现：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

const condiments = ['Ketchup', 'Mustard', 'Relish'];

function createBurger(condimentsList) {
  // 创建主容器
  const burger = document.createElement('div');
  burger.className = 'burger';

  // 创建配料容器
  const toppingsDiv = document.createElement('div');
  toppingsDiv.className = 'toppings';

  // 遍历数组，为每一项创建独立的 <div>
  for (let i = 0; i <p>执行后，DOM 将正确生成：</p>
<pre class="brush:php;toolbar:false;"><div class="burger">
  <div class="toppings">
    <div class="condiment">Ketchup</div>
    <div class="condiment">Mustard</div>
    <div class="condiment">Relish</div>
  </div>
</div>

? 关键注意事项：

❌ 不要在循环外声明 document.createElement() 的结果并重复使用；
✅ 始终在循环体内创建新元素（如 const condimentItem = document.createElement('div')）；

推荐使用 for...of 或 forEach() 提升可读性（尤其当无需索引时）：

condimentsList.forEach(item => {
  const el = document.createElement('div');
  el.className = 'condiment';
  el.textContent = item;
  toppingsDiv.appendChild(el);
});