diff options
Diffstat (limited to 'files/fr/web/api/document/createdocumentfragment/index.html')
-rw-r--r-- | files/fr/web/api/document/createdocumentfragment/index.html | 28 |
1 files changed, 14 insertions, 14 deletions
diff --git a/files/fr/web/api/document/createdocumentfragment/index.html b/files/fr/web/api/document/createdocumentfragment/index.html index 806a9db921..629d26ed27 100644 --- a/files/fr/web/api/document/createdocumentfragment/index.html +++ b/files/fr/web/api/document/createdocumentfragment/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Document/createDocumentFragment <p>Crée un nouvel objet vide de type {{domxref("DocumentFragment")}}.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">var <var>fragment</var> = document.createDocumentFragment(); </pre> @@ -27,29 +27,29 @@ translation_of: Web/API/Document/createDocumentFragment <p>Le principal avantage de cette méthode de mise à jour du DOM vient du fait que le fragment est stocké en mémoire, et pas dans l'arbre DOM lui-même, de sorte que le modifier ne déclenche pas de <a href="http://code.google.com/speed/articles/reflow.html">reflow</a> (le calcul des positions et de la géométrie de chacun des éléments de la page affichée). Par conséquent, l´utilisation de fragments pour effectuer des mises à jour du DOM donne souvent lieu à une <a href="http://ejohn.org/blog/dom-documentfragments/">amélioration des performance</a>s.</p> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <p>Cet exemple crée une liste des principaux navigateurs du web.</p> <h3 id="HTML">HTML</h3> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>ul</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>ul<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ul</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><ul id="ul"> +</ul></pre> <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> element <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'ul'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// en supposant qu'ul existe</span> -<span class="keyword token">var</span> fragment <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createDocumentFragment</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> browsers <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'Firefox'</span><span class="punctuation token">,</span> <span class="string token">'Chrome'</span><span class="punctuation token">,</span> <span class="string token">'Opera'</span><span class="punctuation token">,</span> - <span class="string token">'Safari'</span><span class="punctuation token">,</span> <span class="string token">'Internet Explorer'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<pre class="brush: js">var element = document.getElementById('ul'); // en supposant qu'ul existe +var fragment = document.createDocumentFragment(); +var browsers = ['Firefox', 'Chrome', 'Opera', + 'Safari', 'Internet Explorer']; -browsers<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>browser<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> li <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'li'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - li<span class="punctuation token">.</span>textContent <span class="operator token">=</span> browser<span class="punctuation token">;</span> - fragment<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>li<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +browsers.forEach(function(browser) { + var li = document.createElement('li'); + li.textContent = browser; + fragment.appendChild(li); +}); -element<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>fragment<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +element.appendChild(fragment);</pre> <h3 id="Résultat">Résultat</h3> |