HTML DOM Element insertBefore() methode

Definitie en gebruik

insertBefore() De methode voegt een kindnode in voor een bestaand kindnode.

Zie ook:

appendChild() methode

replaceChild() methode

removeChild() methode

remove() methode

childNodes eigenschap

firstChild eigenschap

lastChild eigenschap

firstElementChild eigenschap

lastElementChild eigenschap

Voorbeeld

Voorbeeld 1

  1. Maak een <li> element
  2. Maak een tekstknooppunt
  3. Voeg tekst toe aan het <li> element
  4. Voeg een <li> element in voor de eerste zoon van <ul>.
const newNode = document.createElement("li");
const textNode = document.createTextNode("Water");
newNode.appendChild(textNode);
const list = document.getElementById("myList");
list.insertBefore(newNode, list.children[0]);

Probeer het zelf

Voorbeeld 2

Verplaats de laatste element van een lijst naar het begin van een andere lijst:

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

Probeer het zelf

Voorbeeld 3

Verplaats de laatste element van een lijst naar het einde van een andere lijst:

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

Probeer het zelf

Syntax

element.insertBefore(newnode, existingnode)

of

node.insertBefore(newnode, existingnode)

Parameters

Parameters Beschrijving
newnode Verplicht. De knoop die moet worden ingevoegd (element).
existingnode

Optioneel. Voeg een nieuwe knoop toe als kindknoop voor de bestaande knoop.

Als er niets is opgegeven, voegt de methode insertBefore de newnode toe aan het einde.

Retourwaarde

Type Beschrijving
Knoop De ingevoegde knoop.

Browserondersteuning

element.insertBefore() Is een kenmerk van DOM Level 1 (1998).

Alle browsers ondersteunen het volledig:

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