Document.createDocumentFragment()

Crea un nuevo DocumentFragment vacio.

Sintaxis

var docFragment = document.createDocumentFragment();

docFragment es una referencia a un objeto DocumentFragment vacio.

Descripción

DocumentFragment son Nodos del DOM que nunca forman parte del DOM tree. El caso de uso mas comun es crear un document fragment, agregar elementos al document fragment y luego agregar el document fragment al DOM tree. En el DOM tree, el document fragment es remplazado por todos sus hijos.

Dado que el document fragment es generado en memoria y no como parte del DOM tree, agregar elementos al mismo no causan reflow (computo de la posicion y geometria de los elementos) en la pagina. Como consecuencia, usar document fragments usualmente resultan en mejor performance.

documentFragment son soportados en todos los navegadores, incluso en Internet Explorer 6, por lo que no hay razon para no usarlos.

Ejemplo

var ul = document.getElementsByTagName("ul")[0]; // asumiendo que existe
var docfrag = document.createDocumentFragment();
var browserList = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"];

browserList.forEach(function(e) {
  var li = document.createElement("li");
  li.textContent = e;
  docfrag.appendChild(li);
});

ul.appendChild(docfrag);
// una lista con los navegadores mas conocidos

Compatibilidad de navegadores

Especificaciónes

• DOM Level 2: createDocumentFragment
• DOM Level 3: createDocumentFragment

Vea También

• document.implementation.createDocument()
• documentFragment