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

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

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

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

Ответы

Ответ 1

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

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

который в основном удалит всех детей самым быстрым способом:)

Ответ 2

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

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

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

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

Ответ 3

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

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

Ответ 4

Это не является прямым решением вопроса, но в большинстве случаев его можно использовать и, возможно, это один из наиболее эффективных способов.

Вы можете поменять весь узел вместо того, чтобы удалять и заполнять его содержимое.

oldNode.parentElement.replaceChild(newNode, oldNode)