MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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.

Syntaxe

var insertElement = parentElement.insertBefore(nouvelElement, refElement)

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

  • insertElement: le nœud inséré, c'est-à-dire nouvelElement
  • parentElement : le parent du nœud nouvellement inséré.
  • nouvelElement : le nœud à insérer.
  • refElement : le nœud avant lequel nouvelElement est inséré. Si refElement retourne une valeur null, le nouvelElement est inséré à la fin de la liste des noeuds enfant du parentElement.

Exemple

<div id="elementParent">
  <span id="elementEnfant">foo bar</span>
</div>

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

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

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

// Obtient une référence de l'élément devant lequel on veut insérer notre nouveau span
var sp2 = document.getElementById("elementEnfant");

// Obtient une référence du nœud parent
var parentDiv = sp2.parentNode;

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

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

Compatibilité des navigateurs

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base 1.0 (Oui) (Oui) (Oui) (Oui)
Att : avec chrome

Version 57.0.2987.133 (64-bit) nextSibling retourne curieusement un Element marqué de type #text (comprend un ensemble d'attributs). C'est nexElementSibling qui retourne directement l'element correct.
Curieusement on peut accéder à l'élément recherché avec sp2.NextSibling.NextSibling où sp2.NextSibling.NextElementSibling. Le premier appel ayant alors un effet neutre...

Spécification

 

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : trebly, fscholz, teoli, Hasilt, tregagnon, Julien.stuby, Mgjbot, BenoitL, Cerbere13
 Dernière mise à jour par : trebly,