使用 replaceChild 时替换 1 个以上的子节点

问题描述

我正在调用一个 api 来生成一个时钟尾列表。有2个列表。第一个是饮料成分表。第二个是饮料测量清单。

我想要做的是，当我单击生成随机鸡尾酒按钮时，它会替换通过 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]);
        }
    }
}

解决方法

通过调用 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 未在您的示例中定义，因此我冒昧地将其删除。根据此示例，您可以根据需要将其放回原处。