diff options
author | julieng <julien.gattelier@gmail.com> | 2021-10-02 17:20:24 +0200 |
---|---|---|
committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-02 17:30:20 +0200 |
commit | 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde (patch) | |
tree | 30a56efd3eff3a01bd1611e1840fdbbfacf544a4 /files/fr/web/api/node/insertbefore | |
parent | c05efa8d7ae464235cf83d7c0956e42dc6974103 (diff) | |
download | translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.gz translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.bz2 translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.zip |
convert content to md
Diffstat (limited to 'files/fr/web/api/node/insertbefore')
-rw-r--r-- | files/fr/web/api/node/insertbefore/index.md | 160 |
1 files changed, 65 insertions, 95 deletions
diff --git a/files/fr/web/api/node/insertbefore/index.md b/files/fr/web/api/node/insertbefore/index.md index 289539552f..55abf106dd 100644 --- a/files/fr/web/api/node/insertbefore/index.md +++ b/files/fr/web/api/node/insertbefore/index.md @@ -10,47 +10,43 @@ tags: - Noeud translation_of: Web/API/Node/insertBefore --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>La méthode <code><strong>Node.insertBefore()</strong></code> insère un nœud avant un <em>nœud de référence</em> en tant qu'enfant d'un <em>nœud parent</em> spécifié.</p> +La méthode **`Node.insertBefore()`** insère un nœud avant un _nœud de référence_ en tant qu'enfant d'un _nœud parent_ spécifié. -<p>Si le nœud donné existe déjà dans le document, <code>insertBefore()</code> le déplace de sa position actuelle vers la nouvelle position. (C'est-à-dire qu'il sera automatiquement retiré de son parent existant avant d'être ajouté au nouveau parent spécifié).</p> +Si le nœud donné existe déjà dans le document, `insertBefore()` le déplace de sa position actuelle vers la nouvelle position. (C'est-à-dire qu'il sera automatiquement retiré de son parent existant avant d'être ajouté au nouveau parent spécifié). -<p>Cela signifie qu'un nœud ne peut pas se trouver simultanément à deux endroits du document.</p> +Cela signifie qu'un nœud ne peut pas se trouver simultanément à deux endroits du document. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <var>insertedNode</var> = <var>parentNode</var>.insertBefore(<var>newNode</var>, <var>referenceNode</var>); -</pre> + var insertedNode = parentNode.insertBefore(newNode, referenceNode); -<dl> - <dt><code><var>insertedNode</var></code></dt> - <dd>Le nœud en cours d'insertion (le même que <code><var>newNode</var></code>).</dd> - <dt><code><var>parentNode</var></code></dt> - <dd>Le parent du nœud nouvellement inséré.</dd> - <dt><code><var>newNode</var></code></dt> - <dd>Le nœud à insérer.</dd> - <dt><code><var>referenceNode</var></code></dt> - <dd>Le nœud avant lequel <code><var>newNode</var></code> est inséré. Si c'est <code>null</code>, alors <code><var>newNode</var></code> est inséré à la fin des nœuds enfants de <code><var>parentNode</var></code>.</dd> -</dl> +- `insertedNode` + - : Le nœud en cours d'insertion (le même que `newNode`). +- `parentNode` + - : Le parent du nœud nouvellement inséré. +- `newNode` + - : Le nœud à insérer. +- `referenceNode` + - : Le nœud avant lequel `newNode` est inséré. Si c'est `null`, alors `newNode` est inséré à la fin des nœuds enfants de `parentNode`. -<div class="notecard note"> - <p><strong>Note :</strong> <em><code>referenceNode</code></em> <strong>n'est pas</strong> un paramètre facultatif -- vous devez explicitement transmettre un <code>Node</code> ou <code>null</code>. Ne pas le fournir ou transmettre des valeurs invalides provoque des <a href="https://code.google.com/p/chromium/issues/detail?id=419780">comportements différents</a> selon les différentes versions des navigateurs.</p> -</div> +> **Note :** _`referenceNode`_ **n'est pas** un paramètre facultatif -- vous devez explicitement transmettre un `Node` ou `null`. Ne pas le fournir ou transmettre des valeurs invalides provoque des [comportements différents](https://code.google.com/p/chromium/issues/detail?id=419780) selon les différentes versions des navigateurs. -<h3 id="Return_value">Valeur de retour</h3> +### Valeur de retour -<p>Renvoie l'enfant ajouté (sauf si <code><var>newNode</var></code> est un {{domxref("DocumentFragment")}}, auquel cas le {{domxref("DocumentFragment")}} vide est renvoyé).</p> +Renvoie l'enfant ajouté (sauf si `newNode` est un {{domxref("DocumentFragment")}}, auquel cas le {{domxref("DocumentFragment")}} vide est renvoyé). -<h2 id="Examples">Exemples</h2> +## Exemples -<h3 id="Example_1">Exemple 1</h3> +### Exemple 1 -<pre class="brush: html"><div id="parentElement"> - <span id="childElement">foo bar</span> -</div> +```html +<div id="parentElement"> + <span id="childElement">foo bar</span> +</div> -<script> +<script> // Crée le nouveau nœud à insérer let newNode = document.createElement("span") @@ -71,17 +67,18 @@ parentDiv.insertBefore(newNode, sp2) // Transfert dynamique implicite vers le ty let sp2 = "undefined" // Noeud non existant de l'id "childElement". parentDiv.insertBefore(newNode, sp2) // Génère "Erreur de type : Argument non valide". // Fin du cas de test [ 3 ] -</script> -</pre> +</script> +``` -<h3 id="Example_2">Exemple 2</h3> +### Exemple 2 -<pre class="brush:html"><div id="parentElement"> - <span id="childElement">foo bar</span> -</div> +```html +<div id="parentElement"> + <span id="childElement">foo bar</span> +</div> -<script> -// Crée un nouvel élément simple de type <span> +<script> +// Crée un nouvel élément simple de type <span> let sp1 = document.createElement("span") // Obtient l'élément de référence @@ -91,76 +88,49 @@ let parentDiv = sp2.parentNode // Insert le nouvel élément dans avant sp2 parentDiv.insertBefore(sp1, sp2) -</script> -</pre> +</script> +``` -<p>Il n'existe pas de méthode <code>insertAfter</code>. Il peut être émulé avec une combinaison des méthodes <code>insertBefore</code><a href="/fr/docs/Web/API/Node/insertBefore"> </a>et <code><a href="/fr/docs/Web/API/Node/nextSibling">nextSibling</a></code>.</p> +Il n'existe pas de méthode `insertAfter`. Il peut être émulé avec une combinaison des méthodes `insertBefore`[ ](/fr/docs/Web/API/Node/insertBefore)et [`nextSibling`](/fr/docs/Web/API/Node/nextSibling). -<p>Dans l'exemple ci-dessus, <code>sp1</code> pourrait être inséré après <code>sp2</code> en utilisant :</p> +Dans l'exemple ci-dessus, `sp1` pourrait être inséré après `sp2` en utilisant : -<pre class="brush:js">parentDiv.insertBefore(sp1, sp2.nextSibling);</pre> +```js +parentDiv.insertBefore(sp1, sp2.nextSibling); +``` -<p>Si <code>sp2</code> n'a pas d'enfant suivant, c'est qu'il est le dernier enfant. Dans ce cas, <code>sp2.nextSibling</code> renverra <code>null</code> et <code>sp1</code> sera donc inséré à la fin de la liste des nœuds enfants (c'est-à-dire immédiatement après <code>sp2</code>).</p> +Si `sp2` n'a pas d'enfant suivant, c'est qu'il est le dernier enfant. Dans ce cas, `sp2.nextSibling` renverra `null` et `sp1` sera donc inséré à la fin de la liste des nœuds enfants (c'est-à-dire immédiatement après `sp2`). -<h3 id="Example_3">Exemple 3</h3> +### Exemple 3 -<p>Insérer un élément avant le premier élément enfant en utilisant la propriété <a href="/fr/docs/Web/API/Node/firstChild">firstChild</a>.</p> +Insérer un élément avant le premier élément enfant en utilisant la propriété [firstChild](/fr/docs/Web/API/Node/firstChild). -<pre class="brush:js">// Obtient l'élément parent +```js +// Obtient l'élément parent let parentElement = document.getElementById('parentElement') // Obtient le premier enfant du parent let theFirstChild = parentElement.firstChild - + // Crée un nouvel élément let newElement = document.createElement("div") - + // Insert le nouvel élément avant le premier enfant parentElement.insertBefore(newElement, theFirstChild) - </pre> - -<p>Si l'élément n'a pas de premier enfant, alors <code>firstChild</code> est <code>null</code>. L'élément est toujours ajouté au parent après le dernier enfant. Comme l'élément parent n'avait pas de premier enfant, il n'avait pas non plus de dernier enfant. Par conséquent, le nouvel élément est le seul élément, après l'insertion.</p> - -<h2 id="Specifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Fixes errors in the insertion algorithm</td> - </tr> - <tr> - <td>{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}</td> - <td>{{Spec2('DOM4')}}</td> - <td>Describes the algorithm in more detail</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>No notable changes</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>No notable changes</td> - </tr> - <tr> - <td> - {{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}} - </td> - <td>{{Spec2('DOM1')}}</td> - <td>Introduced</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Node.insertBefore")}}</p> + +``` + +Si l'élément n'a pas de premier enfant, alors `firstChild` est `null`. L'élément est toujours ajouté au parent après le dernier enfant. Comme l'élément parent n'avait pas de premier enfant, il n'avait pas non plus de dernier enfant. Par conséquent, le nouvel élément est le seul élément, après l'insertion. + +## Spécifications + +| Specification | Status | Comment | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | --------------------------------------- | +| {{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}} | {{Spec2('DOM WHATWG')}} | Fixes errors in the insertion algorithm | +| {{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}} | {{Spec2('DOM4')}} | Describes the algorithm in more detail | +| {{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}} | {{Spec2('DOM3 Core')}} | No notable changes | +| {{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}} | {{Spec2('DOM2 Core')}} | No notable changes | +| {{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}} | {{Spec2('DOM1')}} | Introduced | + +## Compatibilité des navigateurs + +{{Compat("api.Node.insertBefore")}} |