如何避免在for循环绘制HTML对象时出现变量覆盖问题

问题原因 #

你当前的代码中，$primary 这个div元素是在循环外部创建的。每次循环仅修改它的内容并尝试追加到父元素，但DOM元素属于引用类型，同一个元素多次执行appendChild时，只会将它从原有位置移动到新位置，而非创建新元素。最终页面上只会显示最后一次循环的内容，之前的元素都被“覆盖”（实际是被移动替换）了。

修复方案 #

将创建div的代码放到循环内部，让每次迭代都生成一个全新的div元素：

paintPrimary: (id, alias, country, date, content) => {
    let primaryArray = ['Alias', 'Country', 'Date', 'Description'];
    // 缓存父元素，避免循环内重复查询DOM提升性能
    const $parent = document.getElementById(id);
    for (let primaryCounter = 0; primaryCounter < primaryArray.length; primaryCounter ++) {
        // 每次循环都新建独立的div元素
        const $primary = document.createElement('div');
        $primary.className = 'teamHeaders';
        $primary.innerHTML = primaryArray[primaryCounter];
        $parent.appendChild($primary);
    }
}

额外优化（可选） #

使用数组forEach方法替代传统for循环，代码更简洁易读；同时如果仅插入纯文本，用textContent替代innerHTML更安全（避免潜在XSS风险）：

paintPrimary: (id, alias, country, date, content) => {
    const primaryArray = ['Alias', 'Country', 'Date', 'Description'];
    const $parent = document.getElementById(id);
    primaryArray.forEach(text => {
        const $primary = document.createElement('div');
        $primary.className = 'teamHeaders';
        $primary.textContent = text;
        $parent.appendChild($primary);
    });
}

内容的提问来源于stack exchange，提问作者8hoursking