From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- .../api/document/createdocumentfragment/index.html | 119 +++++++++++++++++++++ 1 file changed, 119 insertions(+) create mode 100644 files/es/web/api/document/createdocumentfragment/index.html (limited to 'files/es/web/api/document/createdocumentfragment') diff --git a/files/es/web/api/document/createdocumentfragment/index.html b/files/es/web/api/document/createdocumentfragment/index.html new file mode 100644 index 0000000000..5137778ee7 --- /dev/null +++ b/files/es/web/api/document/createdocumentfragment/index.html @@ -0,0 +1,119 @@ +--- +title: Document.createDocumentFragment() +slug: Web/API/Document/createDocumentFragment +translation_of: Web/API/Document/createDocumentFragment +--- +
{{ ApiRef("DOM") }}
+ +
+ +

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 {{domxref("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

+ +

{{EmbedLiveSample("Example", 600, 140)}}

+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte Basico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Soporte Basico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Especificaciónes

+ + + +

Vea También

+ + -- cgit v1.2.3-54-g00ecf