Método de la interfaz de document: createDocumentFragment()
Genera un contenedor vacío (en forma de objeto) al que se le pueden añadir más subeelementos, o nodos HTML, pero que no serán parte del DOM interno inicial de la página. En otras palabras, una vez creado el DocumentFragment este será parte de los datos recuperables del navegador (en memoria) pero no del DOM.
Por lo tanto, cargar los elementos contenidos en el documentFragment() no crea demoras al mostrarlos en el navegador. Ya que DocumentFragment libera al navegador de carga excesiva de procesos, es considerado como eficiente para mostrar contenido.
En el ejemplo siguiente, los elementos debajo del botón negro son nodos fragmentos que no son parte de la estructura DOM. El contenedor document.createDocumentFragment(); es quién agrupa esos elementos.
Finalmente, el .addEventListener("click", function(){}); activa la vinculación y la exposición de los elementos mediante un blucle while, que inserta debajo de un nodo dado (en este caso, el botón negro), a los nodos 'fragmento'. Y en donde fragmentoo.firstChild representa cada elemento del contenedor createDocumentFragment();
En Javascript
botn.addEventListener("click", function(){
// Cada nodo debe ser insertado uno a uno desde WHILE
// MIENTRAS 'fragmentoo.firstChild' = true .... ejecute bucle
while (fragmentoo.firstChild) {
botn.insertAdjacentElement('afterend', fragmentoo.firstChild);}
// Bucle se cancela cuando sea false (ya no hayan nodos)
// Se añaden clases de estilos CSS para elementos creados
parrafito.classList.add('estiloPrueba1');
span.classList.add('estiloPrueba2');
});
Click para mostrar nodos