HTML DOM Element insertBefore() metode

Definition og brug

insertBefore() Metoden indsætter et barn element før et eksisterende barn element.

Se også:

appendChild() metode

replaceChild() metode

removeChild() metode

remove() metode

childNodes egenskab

firstChild egenskab

lastChild egenskab

firstElementChild egenskab

lastElementChild egenskab

Eksempel

Eksempel 1

  1. Opret <li> element
  2. Opret en tekstnode
  3. Tilføj tekst til <li> element
  4. Indsæt <li> element før den første underelement i <ul>;
const newNode = document.createElement("li");
const textNode = document.createTextNode("Vand");
newNode.appendChild(textNode);
const list = document.getElementById("myList");
list.insertBefore(newNode, list.children[0]);

Prøv det selv

Eksempel 2

Flyt den sidste element fra en liste til en anden listes begyndelse:

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

Prøv det selv

Eksempel 3

Flyt den sidste element fra en liste til en anden listes ende:

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

Prøv det selv

Syntaks

element.insertBefore(newnode, existingnode)

eller

node.insertBefore(newnode, existingnode)

Parameter

Parameter Beskrivelse
newnode Obligatorisk. Den node, der skal indsættes (elementet).
existingnode

Valgfri. Indsæt en ny nodes undernode før.

Hvis ikke angivet, vil insertBefore-metoden indsætte newnode i slutningen.

Returværdi

Type Beskrivelse
Node Den indsatte node.

Browserv understøttelse

element.insertBefore() er en DOM Level 1 (1998) funktion.

Alle browsere understøtter det fuldt ud:

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