queryselector - javascript select element

¿Reemplazando a todos los hijos de un HTMLElement?

Question

En mi código, con bastante frecuencia debo reemplazar a todos los elementos secundarios de un determinado contenedor HTML con una nueva lista de elementos secundarios.

¿Cuál es la forma más rápida de hacer esto? Mi enfoque actual es recopilar todos los elementos nuevos en un DocumentFragment. La única forma que he encontrado para reemplazar a los niños es eliminar a todos los niños uno por uno y agregar el fragmento. ¿No hay manera más rápida?

Nota: la solución no necesita ser de navegador cruzado, pero preferiblemente no debería requerir componentes de terceros como jQuery. El dispositivo de destino es WebKit en una CPU muy lenta, así que necesito mantener el control total de cualquier reflujo.

Answer 1

Utilice JS moderno! Utilice directamente remove lugar de removeChild

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

Alternativamente:

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

Answer 2

Si simplemente desea reemplazar a todos los hijos, en relación con el tipo, ¿por qué no configura su contenido en '''' y luego agrega su código?

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

que básicamente eliminaría a todos los niños de la manera más rápida posible :)

Answer 3

Una posible alternativa donde la configuración de innerHTML no funciona:

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