Document.createDocumentFragment()
Crea un nuevo DocumentFragment
vacio, dentro del cual un nodo del DOM puede ser adicionado para construir un nuevo arbol DOM fuera de pantalla.
Sintaxis
var fragment = document.createDocumentFragment();
Se crea un objeto DocumentFragment vacio, el cual queda listo para que pueda insertarseles nodos en el.
Notas de uso
DocumentFragment
son Nodos del DOM que nunca forman parte del arbol DOM. El caso de uso mas comun es crear un document fragment, agregar elementos al document fragment y luego agregar dicho document fragment al arbol del DOM. En el arbol del DOM, el document fragment es remplazado por todos sus hijos.
Dado que el document fragment es generado en memoria y no como parte del arbol del DOM, 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.
Tambien puede utilizarse el constructor documentFragment
para crear un nuevo fragmento:
let fragment = new DocumentFragment();
Ejemplo
Este ejemplo crea una lista de los principales navegadores web en un DocumentFragment, y luego adiciona el nuevo subarbol DOM al document para ser mostrado.
HTML
<ul id="ul"></ul>
JavaScript
var element = document.getElementById("ul"); // assuming ul exists
var fragment = document.createDocumentFragment();
var browsers = ["Firefox", "Chrome", "Opera", "Safari", "Internet Explorer"];
browsers.forEach(function (browser) {
var li = document.createElement("li");
li.textContent = browser;
fragment.appendChild(li);
});
element.appendChild(fragment);
Resultado
Especificaciones
Specification |
---|
DOM Standard # ref-for-dom-document-createdocumentfragment① |
Compatibilidad con navegadores
BCD tables only load in the browser