Derniers tutoriels de développement web
 

HTML DOM insertBefore() Method

<Object Élément

Exemple

Insérez un nouveau <li> élément avant le premier élément enfant d'un <ul> élément:

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>

Avant d'insérer:

  • Coffee
  • Tea

Après avoir inséré:

  • Water
  • Coffee
  • Tea
Essayez vous - même »

Plus "Try it Yourself" - "Try it Yourself" exemples ci - dessous.


Définition et utilisation

Le insertBefore() méthode insère un noeud comme un enfant, juste avant un enfant existant, que vous spécifiez.

Astuce: Si vous voulez créer un nouvel élément de liste, avec le texte, souvenez - vous de créer le texte comme un nœud de texte que vous ajoutez à <li> élément, puis insérez <li> à la liste.

Vous pouvez également utiliser la méthode insertBefore pour insérer / déplacer un élément existant (See "More Examples") .


Support du navigateur

Les chiffres du tableau indiquent la première version du navigateur qui prend en charge pleinement la méthode.

méthode
insertBefore() Oui Oui Oui Oui Oui

Syntaxe

Les valeurs des paramètres
Paramètre Type La description
newnode Node object Champs obligatoires. L'objet de nœud que vous souhaitez insérer
existingnode Node object Optionnel. Le nœud enfant que vous souhaitez insérer le nouveau nœud avant. Lorsqu'ils ne sont pas spécifiés, le procédé insertBefore insère le newnode à la fin

Détails techniques

Valeur de retour: Un objet de noeud représentant le noeud inséré
version DOM Niveau de base 1 Noeud objet

Exemples

autres exemples

Exemple

Déplacer un <li> élément d'une liste à l' autre:

var node = document.getElementById("myList2").lastChild;
var list = document.getElementById("myList1");
list.insertBefore(node, list.childNodes[0]);

Avant d'insérer:

  • Coffee
  • Tea
  • Water
  • Milk

Après insertBefore:

  • Milk
  • Coffee
  • Tea
  • Water
Essayez vous - même »

<Object Élément