element.insertBefore

« Référence du DOM

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)

Spécification

 

Étiquettes et contributeurs liés au document

Contributeurs ayant participé à cette page : Julien.stuby, BenoitL, tregagnon, Cerbere13, Mgjbot
Dernière mise à jour par : tregagnon,