HTML DOM Element replaceChild() metodi

Määritelmä ja käyttö

replaceChild() Metodi korvaa lapsinodot uudella solmulla.

Katso myös：

removeChild() metodi

remove() metodi

appendChild() metodi

insertBefore() metodi

childNodes ominaisuus

firstChild ominaisuus

lastChild ominaisuus

firstElementChild ominaisuus

lastElementChild ominaisuus

Aiheeseen liittyvät dokumentti方法：

createElement() metodi

createTextNode() metodi

Esimerkki

Esimerkki 1

Korvaa uudella tekstityökalulla <li>-elementin tekstityökalu:

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

Vaihdettu ennen:

  • Coffee
  • Tea
  • Milk

Vaihdettu jälkeen:

  • Water
  • Tea
  • Milk

Kokeile itse

Esimerkki 2

Korvaa <li> -elementti uudella <li> -elementillä:

// Luo uusi <li> -elementti:
const element = document.createElement("li");
// Luo uusi tekstisolmu:
const textNode = document.createTextNode("Water");
// Lisää tekstisolmu <li> -elementtiin:
element.appendChild(textNode);
// Hae id="myList" -elementti <ul>:
const list = document.getElementById("myList");
// Korvaa ensimmäinen lapsisolmu uudella <li> -elementillä:
list.replaceChild(element, list.childNodes[0]);

Vaihdettu ennen:

  • Coffee
  • Tea
  • Milk

Vaihdettu jälkeen:

  • Water
  • Tea
  • Milk

Kokeile itse

Syntaksi

.replaceChild(newnode, oldnode)

Parametrit

Parametrit Kuvaus
newnode Välttämätön. Lisättävä solmu.
oldnode Välttämätön. Poistettava solmu.

Palautusarvo

Tyyppi Kuvaus
Node-objekti Vaihdettava solmu.

Selaimen tuki

element.replaceChild() Se on DOM Level 1 (1998) ominaisuus.

Kaikki selaimet tukevat sitä täysin:

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