HTML DOM Element replaceChild() methode

Definitie en gebruik

replaceChild() De methode vervangt een kindknop met een nieuwe knop.

Zie ook:

removeChild() methode

remove() methode

appendChild() methode

insertBefore() methode

childNodes eigenschap

firstChild eigenschap

lastChild eigenschap

firstElementChild eigenschap

lastElementChild eigenschap

Gerelateerde documentatiemethoden:

createElement() methode

createTextNode() methode

Voorbeeld

Voorbeeld 1

Vervang de tekstknop in het <li>-element met een nieuwe tekstknop:

const newNode = document.createTextNode("Water");
const element = document.getElementById("myList").children[0];
element.replaceChild(newNode, element.childNodes[0]);

Voor de vervanging:

  • Koffie
  • Thee
  • Melk

Na de vervanging:

  • Water
  • Thee
  • Melk

Probeer het zelf

Voorbeeld 2

Vervang de <li> knoop met een nieuwe <li> knoop:

// Maak een nieuwe <li> element aan:
const element = document.createElement("li");
// Maak een nieuwe tekstknoop aan:
const textNode = document.createTextNode("Water");
// Voeg de tekstknoop toe aan het <li> element:
element.appendChild(textNode);
// Haal het <ul> element met id="myList" op:
const list = document.getElementById("myList");
// Vervang de eerste subknoop met een nieuwe <li> element:
list.replaceChild(element, list.childNodes[0]);

Voor de vervanging:

  • Koffie
  • Thee
  • Melk

Na de vervanging:

  • Water
  • Thee
  • Melk

Probeer het zelf

Syntax

node.replaceChild(newnode, oldnode)

Parameters

Parameters Beschrijving
newnode Verplicht. De te inserteren knoop.
oldnode Verplicht. De te verwijderen knoop.

Retourwaarde

Type Beschrijving
Node object De vervangen knoop.

Browserondersteuning

element.replaceChild() Is DOM Level 1 (1998) kenmerk.

Alle browsers ondersteunen het volledig:

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