Método HTML DOM Document createDocumentFragment()

Definición y uso

createDocumentFragment() El método crea un nodo offscreen.

Los nodos offscreen se pueden usar para construir nuevos fragmentos de documento que se pueden insertar en cualquier documento.

createDocumentFragment() El método también se puede usar para extraer partes del contenido del documento, modificar, agregar o eliminar某些 contenido, y volver a insertarlo en el documento.

Consejo

Siempre puede editar directamente los elementos HTML. Pero una mejor方法是 construir (fuera de pantalla) un fragmento de documento y agregar este fragmento al DOM real (activo) cuando esté listo. Porque inserta el fragmento después de estar listo, solo se necesitará una reordenación y una renderización.

Si desea añadir elementos de HTML en un bucle, también puede mejorar el rendimiento utilizando el fragmento de documento.

Nota:Los nodos de documento añadidos al fragmento de documento se eliminarán del documento original.

Ejemplo

Ejemplo 1

Añadir elementos a una lista vacía:

const fruits = ['Banana', 'Naranja', 'Mango'];
// Crear fragmento de documento:
const dFrag = document.createDocumentFragment();
// Añadir el elemento li al fragmento:
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}
// Añadir el fragmento a la lista:
document.getElementById('myList').appendChild(dFrag);

Prueba personalmente

Ejemplo 2

Añadir elementos a una lista existente:

const fruits = ['Banana', 'Naranja', 'Mango'];
// Crear fragmento de documento:
const dFrag = document.createDocumentFragment();
// Añadir el elemento li al fragmento:
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}
// Añadir el fragmento a la lista:
document.getElementById('myList').appendChild(dFrag);

Prueba personalmente

Sintaxis

document.createDocumentFragment()

Parámetros

Ninguno.

Valor devuelto

Tipo Descripción
Nodo El DocumentFragment recién creado no tiene nodos hijos.

Compatibilidad del navegador

document.createComment() Es una característica del nivel DOM 1 (1998).

Todos los navegadores lo soportan:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Soporte 9-11 Soporte Soporte Soporte Soporte