Méthode insertBefore() de l'élément HTML DOM

Définition et utilisation

insertBefore() La méthode insère un nœud enfant avant un nœud enfant existant.

Voir également :

Méthode appendChild()

Méthode replaceChild()

Méthode removeChild()

Méthode remove()

Propriété childNodes

Propriété firstChild

Propriété lastChild

Propriété firstElementChild

Propriété lastElementChild

Exemple

Exemple 1

  1. Créer un élément <li>
  2. Créer un nœud de texte
  3. Ajouter le texte à l'élément <li>
  4. Insérer un élément <li> avant le premier élément fils de <ul> :
const newNode = document.createElement("li");
const textNode = document.createTextNode("Eau");
newNode.appendChild(textNode);
const list = document.getElementById("myList");
list.insertBefore(newNode, list.children[0]);

Essayez-le vous-même

Exemple 2

Déplacez le dernier élément d'une liste au début d'une autre liste :

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, list.children[0]);

Essayez-le vous-même

Exemple 3

Déplacez le dernier élément d'une liste à la fin d'une autre liste :

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, null);

Essayez-le vous-même

Syntaxe

element.insertBefore(newnode, existingnode)

ou

node.insertBefore(newnode, existingnode)

Paramètres

Paramètres Description
newnode Obligatoire. Le nœud à insérer (élément).
existingnode

Optionnel. Insère un sous-nœud nouveau avant le nœud existant.

Si non spécifié, la méthode insertBefore insère newnode à la fin.

Valeur de retour

Type Description
Nœud Nœud inséré.

Support du navigateur

element.insertBefore() C'est une fonctionnalité de DOM Level 1 (1998).

Tous les navigateurs le supportent complètement :

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support