使用 replaceChild 时替换超过 1 个子节点

Question

我正在调用一个 api 来为 clocktails 生成一个列表。有 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]);
        }
    }
}

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 未在您的示例中定义，因此我冒昧地将其删除。根据这个例子，如果需要你可以把它放回去。

使用 replaceChild 时替换超过 1 个子节点

Replacing more than 1 child node when using replaceChild

javascript

api

fetch

removechild