Почему DocumentFragment игнорирует некоторые добавленные узлы?

Question

Я пытаюсь выполнить этот код, но в результате я получаю first third, полностью игнорируя средний <b>second</b> узел. Может кто-нибудь сказать, в чем проблема?

const html = 'first <b>second</b> third ';
const span = document.createElement('span');
const frag = document.createDocumentFragment();
span.innerHTML = html;

for (let node of span.childNodes) {
	frag.appendChild(node);
}

document.body.appendChild(frag);

Answer 1

Это потому, что вы изменяете список узлов, которые вы проходите. Каждый раз, когда вы удаляете один из span (добавляя его к фрагменту), .childNodes обновляется и переиндексируется.

Поскольку вы переносите все узлы, используйте цикл while, который выполняется, пока есть хотя бы один дочерний элемент, и добавляет .firstChild к фрагменту.

const html = 'first <b>second</b> third ';
const span = document.createElement('span');
const frag = document.createDocumentFragment();
span.innerHTML = html;

while (span.firstChild) {
  frag.appendChild(span.firstChild);
}

document.body.appendChild(frag);

---

Или просто используйте .insertAdjacentHTML() вместо всей этой передачи.

const html = 'first <b>second</b> third ';

document.body.insertAdjacentHTML("beforeend", html);