本文详解为何在循环中复用同一 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 <p>这里 $primary 是一个单一 DOM 节点引用。appendChild() 在目标容器中已存在该节点时，会自动将其从原位置移除、再插入到末尾——因此最终 id 容器中<strong>仅保留最后一个值（'Description'）对应的 <div>，其余三次操作均被“覆盖”掉。<p>✅ 正确做法是：<strong>将 document.createElement() 移入循环内部</strong>，确保每次迭代都创建一个全新的、独立的 DOM 元素：</p>
<pre class="brush:php;toolbar:false;">paintPrimary: (id, alias, country, date, content) => {
const primaryArray = ['Alias', 'Country', 'Date', 'Description'];
for (let i = 0; i <blockquote>
<p>? 补充说明： </p>
<ul>
<li>使用 .textContent 而非 .innerHTML 可防止潜在 XSS 风险（当前数据为静态字符串，虽无风险，但属最佳实践）； </li>
<li>若需支持富文本或 HTML 片段，请确保内容已严格转义或经可信来源校验； </li>
<li>对于大量节点插入，可考虑使用 DocumentFragment 提升性能（尤其在循环 >100 次时）：</li>
</ul>
</blockquote><pre class="brush:php;toolbar:false;">// 性能优化版（适用于大批量渲染）
const fragment = document.createDocumentFragment();
for (let i = 0; i <p>总结：DOM 节点是对象引用，不是值拷贝。循环中复用同一节点必然导致逻辑错乱。牢记「一个节点 → 一次插入」原则，并在需要多个实例时，务必在循环体内创建新节点——这是原生 JS 动态渲染的基石性认知。</p>
