使用replaceChild时替换多个子节点

Question

我正在调用 API 来生成鸡尾酒列表。有两个列表。第一个是饮料成分表。第二个是饮料测量清单。

我想要做的是，当我单击“生成随机鸡尾酒”按钮时，它会替换通过 API 生成的所有文本并将其放入列表中，发生的情况是当我再次按下该按钮时，它只填充最后一个文本列表中的项目，即使我在控制台日志时可以看到所有项目。

这是当前的 JavaScript：

function getMeasure(data) {
    for (i = 1; i <= 15; i++) {

        if (data.drinks[0][`strMeasure${i}`]) {
            // console.log(data.drinks[0][`strMeasure${i}`])
            var drinkMeasureDiv = document.createElement('li');
            drinkMeasureDiv.classList.add('drink-measure')
            var drinkMeasureText = document.createTextNode(data.drinks[0][`strMeasure${i}`] );
            drinkMeasureDiv.appendChild(drinkMeasureText);
            drinkMeasureEl.appendChild(drinkMeasureDiv);

            var item = document.getElementById("measure-list");
            item.replaceChild(drinkMeasureDiv, item.childNodes[0]);
        }
    }
}

Answer 1

通过调用

item.replaceChild(drinkMeasureDiv, item.childNodes[0])

，您将替换同一元素最多 16 次（因此只有最后一个条目可见，因为它是唯一不被覆盖的条目）。 这可能就是您想要的：

function getMeasure(data) {
    const list = document.getElementById("measure-list");
    list.childNodes.forEach((n) => n.remove());
    const drink = data.drinks[0];

    for (let i = 1; i <= 15; i++) {
        if (drink[`strMeasure${i}`]) {
            const drinkMeasureDiv = document.createElement("li");
            drinkMeasureDiv.classList.add("drink-measure");
            const drinkMeasureText = document.createTextNode(drink[`strMeasure${i}`]);
            drinkMeasureDiv.appendChild(drinkMeasureText);
            list.appendChild(drinkMeasureDiv);
        }
    }
}

首先清除

.measure-list

的所有子节点，然后将它们一一追加回来。 您的示例中未定义

drinkMeasureEl

，因此我冒昧地将其删除。根据这个例子，如果有必要，你可以把它放回去。