Skip to main content

Visit Mozilla.org

DOM:element.insertBefore

Un article de MDC.

« Référence du DOM Gecko

Sommaire

[modifier] Résumé

Insère le nœud spécifié juste avant un élément de référence parmi les enfants du nœud courant.

[modifier] Syntaxe 

var elementIns = elementParent.insertBefore(nouvelElement, elementRef)

Si elementRef vaut null, nouvelElement est inséré à la fin de la liste des nœuds enfants.

  • elementIns : le nœud inséré, c'est-à-dire nouvelElement
  • elementParent : le parent du nœud nouvellement inséré.
  • nouvelElement : le nœud à insérer.
  • elementRef : le nœud avant lequel nouvel_element est inséré.

[modifier] Exemple 

 <html>

 <head>
 <title>Test d'insertBefore</title>
 </head>

 <body>
 <div>
   <span id="childSpan">foo bar</span>
 </div>

 <script type="text/javascript">
 // crée un nouveau nœud d'élément vide
 // sans aucun ID, attribut ou contenu
 var sp1 = document.createElement("span");

 // lui donne un attribut id appelé 'newSpan'
 sp1.setAttribute("id", "newSpan");

 // crée un peu de contenu pour cet élément.
 var sp1_content = document.createTextNode("Ceci est un nouvel élément span. ");

 // ajoute ce contenu au nouvel élément
 sp1.appendChild(sp1_content);

 var sp2 = document.getElementById("childSpan");
 var parentDiv = sp2.parentNode;

 // insère le nouvel élément dans le DOM avant sp2
 parentDiv.insertBefore(sp1, sp2);
 </script>

 </body>
 </html>

Il n'existe pas de méthode insertAfter pour insérer un nœud après un autre, cependant on peut l'émuler avec une combinaison de insertBefore et nextSibling.

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

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

[modifier] Spécification

Récupérée de « http://developer.mozilla.org/fr/docs/DOM:element.insertBefore »