Méthode HTML DOM insertBefore()
Exemple
Insérez un nouvel élément <li> avant le premier élément enfant d'un élément <ul> :
var newItem = document.createElement("LI"); // Create a <li> node
var textnode = document.createTextNode("Water"); // Create a text node
newItem.appendChild(textnode); // Append the text to <li>
var list = document.getElementById("myList"); // Get the <ul> element to insert a new node
list.insertBefore(newItem, list.childNodes[0]); // Insert <li> before the first child of <ul>
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La méthode insertBefore() insère un nœud en tant qu'enfant, juste avant un enfant existant, que vous spécifiez.
Conseil : Si vous souhaitez créer un nouvel élément de liste, avec du texte, n'oubliez pas de créer le texte en tant que nœud de texte que vous ajoutez à l'élément <li>, puis insérez <li> dans la liste.
Vous pouvez également utiliser la méthode insertBefore pour insérer/déplacer un élément existant (voir "Plus d'exemples").
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la méthode.
Method | |||||
---|---|---|---|---|---|
insertBefore() | Yes | Yes | Yes | Yes | Yes |
Syntaxe
node.insertBefore(newnode, existingnode)
Valeurs des paramètres
Parameter | Type | Description |
---|---|---|
newnode | Node object | Required. The node object you want to insert |
existingnode | Node object | Required. The child node you want to insert the new node before. If set to
null , the insertBefore method will insert the newnode at the end |
Détails techniques
Valeur de retour : | Un objet nœud, représentant le nœud inséré |
---|---|
Version DOM | Objet de nœud principal de niveau 1 |
Plus d'exemples
Exemple
Déplacez un élément <li> d'une liste à une autre :
var node = document.getElementById("myList2").lastChild;
var list = document.getElementById("myList1");
list.insertBefore(node, list.childNodes[0]);