element.insertBefore

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

Spécification

• DOM Level 2 Core : insertBefore — Traduction en français (non normative)