本文详解为何在循环中复用同一 dom 元素引用会导致内容被反复覆盖，以及如何通过在循环体内动态创建新元素来正确批量生成独立 html 节点。
本文详解为何在循环中复用同一 dom 元素引用会导致内容被反复覆盖，以及如何通过在循环体内动态创建新元素来正确批量生成独立 html 节点。
在使用原生 JavaScript 动态生成 HTML 元素时，一个常见却容易被忽视的错误是：在循环外部创建 DOM 元素，然后在循环内反复修改并追加它。这会导致看似“批量生成”的效果，实则只是将同一个元素节点在 DOM 中不断移动（而非复制），最终仅保留在最后一次追加的位置——表面看是“覆盖”，本质是节点复用与重定位。
以原始代码为例：
paintPrimary: (id, alias, country, date, content) => {
let primaryArray = ['Alias', 'Country', 'Date', 'Description'];
const $primary = document.createElement('div'); // ❌ 错误：只创建一次
$primary.className = 'teamHeaders';
for (let i = 0; i < primaryArray.length; i++) {
$primary.innerHTML = primaryArray[i]; // 每次覆写 innerHTML
document.getElementById(id).appendChild($primary); // 同一节点被反复 append（实际是移动）
}
}这里 $primary 是一个单一 DOM 节点引用。appendChild() 在目标容器中已存在该节点时，会自动将其从原位置移除、再插入到末尾——因此最终 id 容器中仅保留最后一个值（'Description'）对应的 <div>，其余三次操作均被“覆盖”掉。
✅ 正确做法是：将 document.createElement() 移入循环内部，确保每次迭代都创建一个全新的、独立的 DOM 元素：
paintPrimary: (id, alias, country, date, content) => {
const primaryArray = ['Alias', 'Country', 'Date', 'Description'];
for (let i = 0; i < primaryArray.length; i++) {
const $primary = document.createElement('div'); // ✅ 正确：每次循环新建节点
$primary.className = 'teamHeaders';
$primary.textContent = primaryArray[i]; // 推荐用 textContent 替代 innerHTML（更安全、高效）
document.getElementById(id).appendChild($primary);
}
}? 补充说明：
- 使用 .textContent 而非 .innerHTML 可防止潜在 XSS 风险（当前数据为静态字符串，虽无风险，但属最佳实践）；
- 若需支持富文本或 HTML 片段，请确保内容已严格转义或经可信来源校验；
- 对于大量节点插入，可考虑使用 DocumentFragment 提升性能（尤其在循环 >100 次时）：
// 性能优化版（适用于大批量渲染）
const fragment = document.createDocumentFragment();
for (let i = 0; i < primaryArray.length; i++) {
const $primary = document.createElement('div');
$primary.className = 'teamHeaders';
$primary.textContent = primaryArray[i];
fragment.appendChild($primary); // 先添加到内存片段
}
document.getElementById(id).appendChild(fragment); // 一次性插入 DOM总结：DOM 节点是对象引用，不是值拷贝。循环中复用同一节点必然导致逻辑错乱。牢记「一个节点 → 一次插入」原则，并在需要多个实例时，务必在循环体内创建新节点——这是原生 JS 动态渲染的基石性认知。
