diff options
Diffstat (limited to 'files/fr/web/api/element/insertadjacenthtml/index.html')
| -rw-r--r-- | files/fr/web/api/element/insertadjacenthtml/index.html | 45 |
1 files changed, 22 insertions, 23 deletions
diff --git a/files/fr/web/api/element/insertadjacenthtml/index.html b/files/fr/web/api/element/insertadjacenthtml/index.html index b82e7dc4a5..e1f0ffa06a 100644 --- a/files/fr/web/api/element/insertadjacenthtml/index.html +++ b/files/fr/web/api/element/insertadjacenthtml/index.html @@ -10,11 +10,11 @@ translation_of: Web/API/Element/insertAdjacentHTML --- <div>{{APIRef("DOM")}}</div> -<p><code>insertAdjacentHTML()</code> analyse le texte spécifié en tant que HTML ou XML et insère les noeuds résultants dans le DOM à la position spécifiée. L'élement qui est utilisé n'est pas réanalysé et les élements qu'il contient ne sont donc pas corrompus. Ceci, et le fait d'éviter la sérialisation supplémentaire, rend la fonction plus rapide et directe que <strong><span style="font-family: courier new,andale mono,monospace;">innerHTML</span>.</strong></p> +<p><code>insertAdjacentHTML()</code> analyse le texte spécifié en tant que HTML ou XML et insère les noeuds résultants dans le DOM à la position spécifiée. L'élement qui est utilisé n'est pas réanalysé et les élements qu'il contient ne sont donc pas corrompus. Ceci, et le fait d'éviter la sérialisation supplémentaire, rend la fonction plus rapide et directe que <strong>innerHTML</strong>.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="line-numbers language-html"><code class="language-html">element.insertAdjacentHTML(position, text);</code></pre> +<pre class="brush: js">element.insertAdjacentHTML(position, text);</pre> <h3 id="Paramètres">Paramètres</h3> @@ -24,10 +24,10 @@ translation_of: Web/API/Element/insertAdjacentHTML </dl> <ul> - <li><code style="color: red;">'beforebegin'</code> : Avant l'<code>element</code> lui-même.</li> - <li><code style="color: green;">'afterbegin'</code> : Juste à l'intérieur de l'<code>element</code> , avant son premier enfant.</li> - <li><code style="color: blue;">'beforeend'</code> : Juste à l'intérieur de l'<code>element</code> , après son dernier enfant.</li> - <li><code style="color: magenta;">'afterend'</code> : Après <code>element</code> lui-même.</li> + <li><code>'beforebegin'</code> : Avant l'<code>element</code> lui-même.</li> + <li><code>'afterbegin'</code> : Juste à l'intérieur de l'<code>element</code> , avant son premier enfant.</li> + <li><code>'beforeend'</code> : Juste à l'intérieur de l'<code>element</code> , après son dernier enfant.</li> + <li><code>'afterend'</code> : Après <code>element</code> lui-même.</li> </ul> <dl> @@ -37,21 +37,20 @@ translation_of: Web/API/Element/insertAdjacentHTML <h3 id="Visualisation_des_noms_de_position">Visualisation des noms de position</h3> -<div class="wp_syntax"> -<div class="code"> -<pre><!-- <strong><code style="color: red;">beforebegin</code></strong> --> -<code style="font-weight: bold;"><p></code> - <!-- <strong><code style="color: green;">afterbegin</code></strong> --> + +<pre><!-- beforebegin --> +<p> + <!-- afterbegin --> foo - <!-- <strong><code style="color: blue;">beforeend</code></strong> --> -<code style="font-weight: bold;"></p></code> -<!-- <strong><code style="color: magenta;">afterend</code></strong> --></pre> -</div> -</div> + <!-- beforeend --> +</p> +<!-- afterend --></pre> -<div class="note"><strong>Note :</strong> Les positions <code>beforebegin</code> et <code>afterend</code> ne fonctionnent que si le noeud est un arbre et a un élément parent.</div> +<div class="note"> + <p><strong>Note :</strong> Les positions <code>beforebegin</code> et <code>afterend</code> ne fonctionnent que si le noeud est un arbre et a un élément parent.</p> +</div> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">// <div id="one">one</div> var d1 = document.getElementById('one'); @@ -60,13 +59,13 @@ d1.insertAdjacentHTML('afterend', '<div id="two">two</div>'); // Ici la nouvelle structure est : // <div id="one">one</div><div id="two">two</div></pre> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Notes</h2> +<h2 id="Browser_Compatibility">Notes</h2> <h3 id="Considérations_de_sécurité">Considérations de sécurité</h3> -<p><span id="result_box" lang="fr"><span>Lorsque vous insérez du code HTML dans une page en utilisant insertAdjacentHTML, veillez à ne pas utiliser d'entrée utilisateur qui n'a pas été échappée.</span></span></p> +<p>Lorsque vous insérez du code HTML dans une page en utilisant insertAdjacentHTML, veillez à ne pas utiliser d'entrée utilisateur qui n'a pas été échappée.</p> -<p><span id="result_box" lang="fr"><span>Il est recommandé de ne pas utiliser <code>insertAdjacentHTML</code> lors de l'insertion de texte brut;</span> <span>à la place, utilisez la propriété <code>node.textContent</code> ou la méthode <code>node.insertAdjacentText()</code>.</span> <span>Cela n'interprète pas le contenu transmis au format HTML, mais l'insère à la place sous forme de texte brut.</span></span></p> +<p>Il est recommandé de ne pas utiliser <code>insertAdjacentHTML</code> lors de l'insertion de texte brut; à la place, utilisez la propriété <code>node.textContent</code> ou la méthode <code>node.insertAdjacentText()</code>. Cela n'interprète pas le contenu transmis au format HTML, mais l'insère à la place sous forme de texte brut.</p> <h2 id="Spécification">Spécification</h2> @@ -96,5 +95,5 @@ d1.insertAdjacentHTML('afterend', '<div id="two">two</div>'); <ul> <li>{{domxref("Element.insertAdjacentElement()")}}</li> <li>{{domxref("Element.insertAdjacentText()")}}</li> - <li><a class="external external-icon" href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a><span class="external external-icon"> par Henri Sivonen </span> <span id="result_box" lang="fr"><span>y compris le benchmark montrant que insertAdjacentHTML peut être beaucoup plus rapide dans certains cas.</span></span></li> + <li><a href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a> par Henri Sivonen y compris le benchmark montrant que insertAdjacentHTML peut être beaucoup plus rapide dans certains cas.</li> </ul> |