循环数组渲染至DOM仅显示最后一个元素的问题求助

你在访问数组、循环数组并将元素渲染至DOM时遇到问题：数组['Ketchup', 'Mustard', 'Relish']仅能渲染出最后一个元素'Relish'，其余两个元素无法显示。尝试在for循环内console.log相关DOM元素，仅重复输出包含'Relish'的<div class="condiments">Relish</div>。期望渲染出三个分别对应三种调料的<div>节点，具体代码如下：

let topingsCount;
const burger = document.createElement('div');
const topingsDiv = document.createElement('div');
const condiments = ['Ketchup', 'Mustard', 'Relish']
const condimentsNewDiv = document.createElement('div');

function createBuger(condiments){
    burger.className = 'burger';
    burger.appendChild(topingsDiv)
    topingsDiv.className = "topings";
    condimentsNewDiv.className = "condiments";
    topingsDiv.appendChild(condimentsNewDiv)
    for(let topingsCount = 0; topingsCount != condiments.length ; topingsCount++){
        topingsDiv.appendChild(condimentsNewDiv).textContent = condiments[topingsCount];
        console.log(condimentsNewDiv);
    }

    console.log(burger);
    document.body.appendChild(burger)


}
createBuger(condiments);

问题原因与解决提示 #

• 核心问题：你只创建了一个condimentsNewDiv DOM元素，循环里反复调用appendChild不会生成新元素，只会把这个唯一的元素从当前位置移到父容器末尾，再每次覆盖它的文本内容，最终只留下最后一次修改的结果。
• 解决方法：把创建<div class="condiments">的代码放到for循环内部，每次循环都生成一个全新的DOM元素，设置好类名和文本后再添加到topingsDiv中。
• 修正后的关键代码片段：

function createBuger(condiments){
    burger.className = 'burger';
    burger.appendChild(topingsDiv)
    topingsDiv.className = "topings";
    
    for(let topingsCount = 0; topingsCount != condiments.length ; topingsCount++){
        // 每次循环创建新的调料div
        const condimentsNewDiv = document.createElement('div');
        condimentsNewDiv.className = "condiments";
        condimentsNewDiv.textContent = condiments[topingsCount];
        topingsDiv.appendChild(condimentsNewDiv);
    }

    console.log(burger);
    document.body.appendChild(burger)
}

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