本文详解如何避免复用同一 DOM 元素导致内容被覆盖的问题，通过在循环中动态创建新元素，实现将数组每一项（如调味料）渲染为独立的 <div> 并正确追加到页面中。
本文详解如何避免复用同一 dom 元素导致内容被覆盖的问题，通过在循环中动态创建新元素，实现将数组每一项（如调味料）渲染为独立的 `
` 并正确追加到页面中。
在前端开发中，将数组数据动态渲染到页面是常见需求。但一个典型误区是：在循环外部预先创建一个 DOM 元素，然后在循环内反复修改并追加它——这会导致该元素被多次移动（而非复制），最终仅保留在 DOM 树的最后一个位置，且 textContent 被不断覆盖，结果只显示数组末尾项（如示例中的 "Relish"）。
根本原因在于：DOM 节点是引用类型。当你调用 topingsDiv.appendChild(condimentsNewDiv) 时，若 condimentsNewDiv 已存在于文档中，浏览器会先将其从原位置移除，再插入到新位置。因此三次循环实际只是把同一个 <div> 在 topingsDiv 内反复“搬家”，最后一次赋值 textContent = 'Relish' 后，DOM 中仅剩一个元素。
✅ 正确做法是：每次迭代都创建全新的 DOM 元素。以下是优化后的完整实现：
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 < condimentsList.length; i++) {
const condimentItem = document.createElement('div');
condimentItem.className = 'condiment';
condimentItem.textContent = condimentsList[i];
toppingsDiv.appendChild(condimentItem); // ✅ 每次追加的是全新元素
}
// 组装结构：burger → toppingsDiv → [condimentItem × 3]
burger.appendChild(toppingsDiv);
document.body.appendChild(burger);
}
createBurger(condiments);执行后，DOM 将正确生成：
立即学习“前端免费学习笔记（深入）”；
<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); }); - 若需绑定事件或存储数据，可利用 dataset 属性（如 el.dataset.index = i）增强可维护性。
掌握这一原则，不仅能解决数组渲染问题，也是构建动态列表、卡片网格、表单选项等场景的基础能力。
