Замена всех дочерних элементов HTMLElement?

Question

В моем коде мне довольно часто требуется заменить все дочерние элементы определенного контейнера HTML новым списком дочерних элементов.

Какой самый быстрый способ сделать это?Мой текущий подход заключается в сборе всех новых элементов в DocumentFragment.Единственный способ, который я нашел, чтобы затем заменить детей, - это удалить всех детей одного за другим и добавить фрагмент.Нет ли более быстрого способа?

Примечание: решение не должно быть кросс-браузерным, но предпочтительно не должно требовать сторонних компонентов, таких как jQuery.Целевым устройством является WebKit на очень медленном процессоре, поэтому мне нужно сохранять полный контроль над всеми перекомпоновками.

Answer 1

Если вы просто хотите заменить все дочерние элементы, в зависимости от типа, почему бы вам просто не установить его содержимое на '', а затем добавить свой код:

container.innerHTML = '';
container.appendChild( newContainerElements );

, который в основном удалит вседети в кратчайшие сроки:)

Answer 2

Используйте современные JS!Непосредственно используйте remove вместо removeChild

while (container.firstChild) {
    container.firstChild.remove();
}

В качестве альтернативы:

let child;
while (child = container.firstChild) {
    child.remove();
}

Answer 3

Возможная альтернатива, когда настройка innerHTML не работает:

while(container.firstChild)
{
  container.removeChild(container.firstChild);
}
container.appendChild(newChild)