From 99efa5cfa34c3f9d38b75352881acdfc99508ebf Mon Sep 17 00:00:00 2001 From: tristantheb Date: Fri, 2 Apr 2021 13:50:14 +0200 Subject: UPDATE: FR-ONLY - Remove all old CompatibilityTable to replace with {{Compat()}} (#311) * UPDATE: Removing CompatibilityTable script - Part 1 * UPDATE: Removing CompatibilityTable script - Part 2 * UPDATE: Removing CompatibilityTable script - Part 3 * UPDATE: Removing CompatibilityTable script - Part 4 * UPDATE: Removing CompatibilityTable script - Part 5/5 * FIX: Repair the EOL of one page * FIX: Fix conflicting file --- files/fr/web/api/node/insertbefore/index.html | 278 +++++++++++--------------- 1 file changed, 115 insertions(+), 163 deletions(-) (limited to 'files/fr/web/api/node/insertbefore') diff --git a/files/fr/web/api/node/insertbefore/index.html b/files/fr/web/api/node/insertbefore/index.html index c66b4b3200..780cf3bb18 100644 --- a/files/fr/web/api/node/insertbefore/index.html +++ b/files/fr/web/api/node/insertbefore/index.html @@ -12,203 +12,155 @@ translation_of: Web/API/Node/insertBefore ---

{{APIRef("DOM")}}

-

La méthode Node.insertBefore() insère un nœud juste avant le noeud de référence en tant qu'enfant du nœud parent spécifié. Si l'enfant donné est une référence à un noeud existant dans le document, insertBefore() le déplace vers sa nouvelle position (il n'est pas nécessaire de supprimer le noeud de son parent avant son ajout à un autre noeud).

+

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é.

-

Cela signifie que le noeud ne peut pas être à 2 points du document simultanément. Donc, si le noeud a déjà un parent, le noeud est d'abord supprimé puis inséré dans la nouvelle position. La méthode {{domxref("Node.cloneNode()")}}  peut être utilisée pour réaliser une copie du noeud avant son ajout sous le nouveau parent. Notez que les copies faites avec cloneNode ne seront pas automatiquement synchronisées.

+

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é).

-

Si le noeud de référence est null , le noeud spécifié est ajouté à la fin de la liste des enfants du noeud parent spécifié.

+

Cela signifie qu'un nœud ne peut pas se trouver simultanément à deux endroits du document.

-

Si l'enfant donné est un {{domxref("DocumentFragment")}}, le contenu entier du {{domxref("DocumentFragment")}} est déplacé dans la liste des enfants du noeud parent spécifié.

+

Syntaxe

-

Syntaxe

- -
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
+
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
 

 
-
Si  referenceNode  vaut null,  newNode  est inséré à la fin de la liste des nœuds enfants.

-
-

-
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 selon les différentes versions des navigateurs.

+

+  
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.

+

+
+

+  
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 selon les différentes versions des navigateurs.

 

 
-
Valeur retournée

+
Valeur de retour

 
-
La valeur renvoyée est l'enfant ajouté sauf si le newNode est un {{domxref("DocumentFragment")}}, auquel cas, le {{domxref("DocumentFragment")}}  vide est retourné.

+
Renvoie l'enfant ajouté (sauf si newNode est un {{domxref("DocumentFragment")}}, auquel cas le {{domxref("DocumentFragment")}} vide est renvoyé).

 
-
Exemple

+
Exemples

 
-
<div id="parentElement">
-   <span id="childElement">foo bar</span>
-</div>
+
Exemple 1

 
-<script>
-// Crée un nouveau noeud à insérer
-var newNode = document.createElement("span");
+
<div id="parentElement">
+  <span id="childElement">foo bar</span>
+</div>
 
-// Obtient une référence sur le noeud parent
-var parentDiv = document.getElementById("childElement").parentNode;
+<script>
+// Crée le nouveau nœud à insérer
+let newNode = document.createElement("span")
 
-// Commence le cas test [ 1 ] : un childElement existe --> tout fonctionne correctement
-var sp2 = document.getElementById("childElement");
-parentDiv.insertBefore(newNode, sp2);
-// Fin du cas test [ 1 ]
+// Obtient une référence au nœud parent
+let parentDiv = document.getElementById("childElement").parentNode
 
-// Commence le cas test [ 2 ] : childElement est d'un Type indéfini
-var sp2 = undefined; // Il n'existe pas de noeud à l'ID "childElement"
-parentDiv.insertBefore(newNode, sp2); // Fusion dynamique implicite pour le type du noeud
-// Fin du cas test [ 2 ]
+// Commence le cas de test [ 1 ] : Existing childElement (tout fonctionne correctement)
+let sp2 = document.getElementById("childElement")
+parentDiv.insertBefore(newNode, sp2)
+// Fin du cas de test [ 1 ]
 
-// Commence le cas test [ 3 ] : childElement est d'un Type "undefined" (string) (chaîne de caractères)
-var sp2 = "undefined"; //  Il n'existe pas de noeud à l'ID "childElement" 
-parentDiv.insertBefore(newNode, sp2); // Génère "Type Error: Invalid Argument" (Erreur du Type : Argument non valide) 
-// Fin du cas test [ 3 ]
-</script>

+// Commence le cas de test [ 2 ] : childElement est de Type undefined
+let sp2 = undefined // Noeud non existant de l'id "childElement".
+parentDiv.insertBefore(newNode, sp2) // Transfert dynamique implicite vers le type Node
+// Fin du cas de test [ 2 ]
 
-
 

-
-
    
- 
  • insertedNode Le noeud en cours d'insertion, c'est-à-dire newNode
    • 
- 
  • parentNode Le parent du nouveau noeud inséré.
    • 
- 
  • newNode Le noeud à insérer.
    • 
- 
  • referenceNode Le noeud devant lequel le newNode est inséré.
    • 
-

+// Commence le cas de test [ 3 ] : childElement est de Type "undefined" ( string )
+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>
+

 
-
Exemple

+
Exemple 2

 
-
<div id="parentElement">
-  <span id="childElement">foo bar</span>
-</div>
+
<div id="parentElement">
+  <span id="childElement">foo bar</span>
+</div>
 
-<script>
-// Crée un nouvel élément <span> simple
-var sp1 = document.createElement("span");
+<script>
+// Crée un nouvel élément simple de type <span>
+let sp1 = document.createElement("span")
 
-// Obtient une référence à l'élément avant lequel nous voulons insérer
-var sp2 = document.getElementById("childElement");
-// Obtient une référence à l'élément parent
-var parentDiv = sp2.parentNode;
+// Obtient l'élément de référence
+let sp2 = document.getElementById("childElement")
+// Get the parent element
+let parentDiv = sp2.parentNode
 
-// Insère le nouvel élément dans le DOM avant sp2
-parentDiv.insertBefore(sp1, sp2);
-</script>

+// Insert le nouvel élément dans avant sp2
+parentDiv.insertBefore(sp1, sp2)
+</script>
+

 
-
Il n'existe pas de méthode insertAfter. Il peut être émulé avec une combinaison des méthodes insertBefore et nextSibling.

+
Il n'existe pas de méthode insertAfter. Il peut être émulé avec une combinaison des méthodes insertBefore et nextSibling.

 
 
Dans l'exemple ci-dessus, sp1 pourrait être inséré après sp2 en utilisant :

 
-
parentDiv.insertBefore(sp1, sp2.nextSibling);
-

+
parentDiv.insertBefore(sp1, sp2.nextSibling);

 
 
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).

 
-
Exemple

-
-
Insérer un élément avant le premier élément enfant en utilisant la propriété firstChild.

+
Exemple 3

 
-
// Obtenir une référence à l'élément dans lequel nous voulons insérer un nouveau noeud
-var parentElement = document.getElementById('parentElement');
-// Obtenir une référence au premier enfant
-var theFirstChild = parentElement.firstChild;
+
Insérer un élément avant le premier élément enfant en utilisant la propriété firstChild.

 
-// Créer un nouvel élément
-var newElement = document.createElement("div");
-
-// Insérer le nouvel élément avant le premier enfant
-parentElement.insertBefore(newElement, theFirstChild);

+
// 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)
+  

 
 
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.

 
-
Compatibilité des navigateurs

-
-
{{CompatibilityTable()}}

-
-

-

-
- 
-  
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-  
- 
+
Spécifications

+
+
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}

+  
+    
+      
+      
+      
+    
+  
+  
+    
+      
+      
+      
+    
+    
+      
+      
+      
+    
+    
+      
+      
+      
+    
+    
+      
+      
+      
+    
+    
+      
+      
+      
+    
+  
SpecificationStatusComment
{{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

 

-

 
-

-
- 
-  
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-  
- 
-
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}

-

-

+
Compatibilité des navigateurs

 
-
Spécifications

-
-
 

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM WHATWG')}}Corrige les erreurs dans l'algorithme d'insertion
{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM4')}}Décrit l'algorithme plus en détail
{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM3 Core')}}Pas de changement notable
{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM2 Core')}}Pas de changement notable
{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}{{Spec2('DOM1')}}Définition initiale

+
{{Compat("api.Node.insertBefore")}}

-- 
cgit v1.2.3-54-g00ecf