循环数组并将元素打印到 DOM

Question

我在访问数组和循环数组然后将数组内的元素打印到 DOM 时遇到问题。由于某种原因，它只打印“Relish”，而不会打印数组“Ketchup”和“Mustard”中的其他两个元素。无论如何，我可以得到如何完成这项任务的提示吗？

这是我的代码。

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);

我尝试了console.log(condimentsNewDiv);在 for 循环中，我可以打印出每种调味品。但它只打印了 3X 次 relish

<div class="condiments">Relish</div>

。我期待它打印出来：

<div class="condiments">Ketchup</div>
<div class="condiments">Mustard</div>
<div class="condiments">Relish</div>

Answer 1

看起来您每次都使用 condimentsNewDiv，而不是为每种调味品创建一个新的 div。这将为每种调味品一遍又一遍地重用相同的元素引用，这意味着每次可能只是覆盖 textContent。

尝试做这样的事情：

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

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

     burger.appendChild(topingsDiv)

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


}
createBuger(condiments);

请注意，这里我们为每种调味品创建一个新的 div，而不是一遍又一遍地重复使用同一个。