Document.createDocumentFragment()

This translation is incomplete. Please help translate this article from English

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

Compatibilidad de navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Soporte Basico (Yes) (Yes) (Yes) (Yes) (Yes)
Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Soporte Basico ? ? ? ? ?

Especificaciónes

Vea También