initial commit

1 files changed, 119 insertions, 0 deletions

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
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div></div>
+
+<p>Crea un nuevo <code><a href="/en-US/docs/DOM/DocumentFragment" title="DOM/DocumentFragment">DocumentFragment</a></code> vacio, dentro del cual un nodo del DOM puede ser adicionado para construir un nuevo arbol DOM fuera de pantalla.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">var fragment = document.createDocumentFragment();
+</pre>
+
+<p>Se crea un objeto<a href="/en-US/docs/DOM/DocumentFragment" title="DOM/DocumentFragment"> DocumentFragment</a> vacio, el cual queda listo para que pueda insertarseles nodos en el.</p>
+
+<h2 id="Notas_de_uso">Notas de uso</h2>
+
+<p><a href="/en-US/docs/DOM/DocumentFragment" title="DOM/DocumentFragment"><code>DocumentFragment</code></a> son Nodos del DOM que nunca forman parte del arbol DOM. El caso de uso mas comun es crear un <em>document fragment</em>, agregar elementos al <em>document fragment</em> y luego agregar dicho <em>document fragment</em> al arbol del DOM. En el arbol del DOM, el <em>document fragment</em> es remplazado por todos sus hijos.</p>
+
+<p>Dado que el <em>document fragment </em>es generado en memoria y no como parte del arbol del DOM, agregar elementos al mismo no causan <a href="http://code.google.com/speed/articles/reflow.html">reflow</a> (computo de la posicion y geometria de los elementos) en la pagina. Como consecuencia, usar <em>document fragments</em> usualmente resultan en <a href="http://ejohn.org/blog/dom-documentfragments/">mejor performance</a>.</p>
+
+<p>Tambien puede utilizarse el constructor {{domxref("documentFragment")}} para crear un nuevo fragmento:</p>
+
+<pre class="syntaxbox notranslate">let fragment = new DocumentFragment();</pre>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<p>Este ejemplo crea una lista de los principales navegadores web en un <em>DocumentFragment</em>, y luego adiciona el nuevo subarbol DOM al document para ser mostrado.</p>
+
+<p>HTML</p>
+
+<pre class="notranslate">&lt;ul id="ul"&gt;
+&lt;/ul&gt;</pre>
+
+<p>JavaScript</p>
+
+<pre class="notranslate">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);</pre>
+
+<p>Resultado</p>
+
+<p>{{EmbedLiveSample("Example", 600, 140)}}</p>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Basico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Basico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Especificaciónes</h2>
+
+<ul>
+ <li>DOM Level 2: <a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-35CB04B5">createDocumentFragment</a></li>
+ <li>DOM Level 3: <a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-35CB04B5">createDocumentFragment</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Vea También</h2>
+
+<ul>
+ <li>{{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}}</li>
+ <li>{{domxref("documentFragment")}}</li>
+</ul>