appendChild в NodeList.forEach добавляет только первый элемент из readableStream - PullRequest
Новая
       25

appendChild в NodeList.forEach добавляет только первый элемент из readableStream

0 голосов
/ 02 мая 2019

У меня есть переменное количество элементов HTML, отправляемых из моего бэкэнда на мою страницу, где я хочу добавить элементы в DOM, как только они будут получены (а не все сразу), как своего рода функция обновления статуса.

Однако, когда я перебираю NodeList элементов, полученных с помощью цикла for или forEach, appendChild всегда добавляет первый узел в список, не повторяя итераций после первого цикла. Есть ли поведение этой функции, о которой я не знаю, что вызывает это?

Удаление строки 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

1 Ответ

0 голосов
/ 02 мая 2019

Когда вы добавляете дочерний элемент к root, его необходимо удалить из elements, поскольку узел может находиться только в одном месте в DOM одновременно. Изменение NodeList, которое вы повторяете с помощью forEach(), заставляет его пропускать элементы, потому что когда вы что-то удаляете, все индексы смещаются вниз.

Вы должны htmlToElements возвращать массив вместо NodeList. 

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