Méthode insertBefore() du DOM HTML

Objet Element HTML DOM

insertBefore()La méthode est utilisée : insérer un nœud enfant avant un nœud enfant existant spécifié.

Si l'objet enfant fourni est une référence à un nœud existant dans le document, insertBefore() le déplace de sa position actuelle à la nouvelle position (voir les « exemples supplémentaires » ci-dessous).

Utilisationappendchild()La méthode ajoute un noeud à la fin de la liste des enfants du noeud parent spécifié.

Syntaxe :

node.insertBefore(newNode, existingNode)

var newElem = document.createElement("h3");　　//　Créer un nouveau h3Élément
var newContent = document.createTextNode("Hi there");　　//　Créer du contenu de texte
newElem.appendChild(newContent);　　//　Ajouter un noeud de texte à un h créé3
var body = document.body;　　//　Obtenir le BODY
body.insertBefore(newElem, body.childNodes[0]);　//　Insérer un H avant le premier enfant de BODY3

Attention :Si vous devez créer un nouvel élément avec du texte, n'oubliez pas de créer le texte en tant que noeud Text, puis de l'ajouter à l'élément, puis de l'ajouter au document.

Compatibilité du navigateur

Tous les navigateurs prennent en charge intégralement la méthode insertBefore() :

Valeur du paramètre

Détails techniques

Plus d'exemples

Créer un élément <p> et l'insérer dans l'élément <div> :

var para = document.createElement("p");　　　//　Créer un noeud <p>
var txt = document.createTextNode("Ceci est un paragraphe.");//　Créer un noeud de texte
para.appendChild(txt);//　Ajouter du texte à <p>
var div = document.getElementById("demo");//　Obtenir le DIV avec "id=demo"
div.insertBefore(para, div.childNodes[0]);//　Insérer un noeud P avant le premier enfant de DIV

Ce exemple déplace un élément de sa position actuelle à une nouvelle position :

var elem = document.getElementById("myList2").lastElementChild;
var list1　= document.getElementById("myList1");
list1.insertBefore(elem, list1.childNodes[0]);

Références associées

Référence HTML DOM :node.hasChildNodes()

Référence HTML DOM :node.appendChild()

Référence HTML DOM :node.removeChild()

Référence HTML DOM :node.replaceChild()

Référence HTML DOM :Méthode document.createElement()

Référence HTML DOM :Méthode document.createTextNode()

Référence HTML DOM :Méthode document.adoptNode()

Référence HTML DOM :Méthode document.importNode()

Objet Element HTML DOM