HTML DOM Element insertBefore() metoden

Definition och användning

insertBefore() Metoden infogar ett barnnod innan ett befintligt barnnod.

Se också:

appendChild() metoden

replaceChild() metoden

removeChild() metoden

remove()-metoden

childNodes-attributet

firstChild-attributet

lastChild-attributet

firstElementChild-attributet

lastElementChild-attributet

Exempel

Exempel 1

  1. Skapa ett <li>-element
  2. Skapa en textnod
  3. Lägg till text till <li>-elementet
  4. Infoga <li>-elementet före den första underkomponenten i <ul>.
const newNode = document.createElement("li");
const textNode = document.createTextNode("Vatten");
newNode.appendChild(textNode);
const list = document.getElementById("myList");
list.insertBefore(newNode, list.children[0]);

Prova själv

Exempel 2

Flytta den sista elementet från en lista till början av en annan lista:

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

Prova själv

Exempel 3

Flytta den sista elementet från en lista till slutet av en annan lista:

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

Prova själv

Syntaks

element.insertBefore(newnode, existingnode)

eller

node.insertBefore(newnode, existingnode)

Parameter

Parameter Beskrivning
newnode Obligatoriskt. Noden som ska infogas (elementet).
existingnode

Valfritt. Lägg till en ny nod som en undernod innan den nya noden.

Om det inte är specificerat, kommer insertBefore-metoden att lägga till newnode i slutet.

Returvärde

Typ Beskrivning
Nod Den insatta noden.

Webbläsarstöd

element.insertBefore() är en DOM Level 1 (1998)-funktion.

Alla webbläsare stöder det fullt ut:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Stöd 9-11 Stöd Stöd Stöd Stöd