HTML DOM Element replaceChild() metod

Definition och användning

replaceChild() Metoden ersätter ett barnnod med ett nytt nod.

Se också:

removeChild() metod

remove() metod

appendChild() metod

insertBefore() metod

childNodes egenskap

firstChild egenskap

lastChild egenskap

firstElementChild egenskap

lastElementChild egenskap

Relaterade dokumentmetoder:

createElement() metoden

createTextNode() metoden

Exempel

Exempel 1

Ersätt textnoden i <li>-elementet med en ny textnod:

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

Ersätt innan:

  • Kaffe
  • Te
  • Mjölk

Ersätt efter:

  • Vatten
  • Te
  • Mjölk

Prova själv

Exempel 2

Ersätt <li>-elementet med ett nytt <li>-element:

// Skapa ett nytt <li>-element:
const element = document.createElement("li");
// Skapa en ny textnod:
const textNode = document.createTextNode("Vatten");
// Lägg till textnoden till <li>-elementet:
element.appendChild(textNode);
// Hämta <ul>-elementet med id="myList":
const list = document.getElementById("myList");
// Ersätt den första undernoden med en ny <li>-element:
list.replaceChild(element, list.childNodes[0]);

Ersätt innan:

  • Kaffe
  • Te
  • Mjölk

Ersätt efter:

  • Vatten
  • Te
  • Mjölk

Prova själv

Syntax

node.replaceChild(newnode, oldnode)

Parameter

Parameter Beskrivning
newnode Obligatorisk. Noden att infoga.
oldnode Obligatorisk. Noden att ta bort.

Returvärde

Typ Beskrivning
Node-objekt Ersättande nod.

Webbläsarstöd

element.replaceChild() är DOM Level 1 (1998) egenskap.

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