Question

我有从后端发送到页面的HTML元素数量不一，我想在其中将元素添加到DOM后（而不是一次全部）附加到DOM，作为一种状态更新功能。

但是，当我循环遍历通过for循环或forEach接收到的元素的NodeList时，appendChild只会追加列表中的第一个Node，而不会迭代通过第一个循环。我不知道此功能的行为会导致这种情况吗？

删除appendChild行会使forEach循环完全迭代，但是其中只有一次迭代一次。我插入了调试行，显示它在第一个循环（console.log（i）等）之后停止迭代。

fetch(`http://localhost:8081/${focussed.textContent}`)
            .then(res => {
                var reader = res.body.getReader();
                function read() {
                    return reader.read().then(({value, done}) => {
                        if (done) {
                            console.log('done');
                            return;
                        }

                        let string = new TextDecoder("utf-8").decode(value);
                        let elements = htmlToElements(string);

                        let root = document.getElementById("root");

                        elements.forEach(child => {
                            root.appendChild(child);
                        })


                        read();
                    });
                };
                read();
            })
            .catch((err) => {
                console.log(err);
            });
    }
}, false);

function htmlToElements(html) {
    let template = document.createElement('template');
    template.innerHTML = html;
    return template.content.childNodes;
}

我希望所有子代都被添加到循环中，并且对为什么appendChild只在NodeList中添加第一个元素感到困惑

Answer 1

将子项附加到root时，必须将其从elements中删除，因为一次节点只能位于DOM中的一个位置。用NodeList修改要迭代的forEach()会导致它跳过元素，因为当删除某些内容时，所有索引都会下移。

您应该让htmlToElements返回一个数组，而不是NodeList。

function htmlToElements(html) {
    let template = document.createElement('template');
    template.innerHTML = html;
    return Array.from(template.content.childNodes);
}

NodeList.forEach中的appendChild仅附加来自可读流

1 个答案: