Kitendo replaceChild() ya HTML DOM Element

Ufafanuzi na matumizi

replaceChild() Kitendo kina uwanja mpya kwa miongo wa kiumbe.

Tazama pia:

Kitendo removeChild()

Kitendo remove()

Kitendo appendChild()

Kitendo insertBefore()

Mimba wa childNodes

Mimba wa firstChild

Mimba wa lastChild

Mimba wa firstElementChild

Mimba wa lastElementChild

Vifaa vya andiko vya HTML:

Kitendo createElement()

Kitendo createTextNode()

mivivu

mivivu 1

Tumia mwenye ujumbe mpya kwa ujumbe wa <li> kwa kutumia miongo wa ujumbe mpya:

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

Kabla ya kuswapisha:

  • Coffee
  • Tea
  • Milk

Baada ya kuswapisha:

  • Water
  • Tea
  • Milk

Jaribu mwenyewe

mivivu 2

Tumia kitumia <li> kina kuswapisha kitumia <li> kina:

// Ingiza kitumia <li> kina:
const element = document.createElement("li");
// Ingiza mabaki ya taarifa ya kina:
const textNode = document.createTextNode("Water");
// Ingiza mabaki ya taarifa kwa kitumia <li>:
element.appendChild(textNode);
// Pata kitumia <ul> ya id="myList":
const list = document.getElementById("myList");
// Tumia vitu vya <li> vya mpya kuswapisha mabaki wa kwanza:
list.replaceChild(element, list.childNodes[0]);

Kabla ya kuswapisha:

  • Coffee
  • Tea
  • Milk

Baada ya kuswapisha:

  • Water
  • Tea
  • Milk

Jaribu mwenyewe

Inayofafanua

.replaceChild(newnode, oldnode)

Paramathreezi

Paramathreezi Maelezo
newnode Inayotarajiwa. Kitumia mabaki ya miongo kinasifika.
oldnode Inayotarajiwa. Kitumia mabaki ya miongo inayotolewa.

Matokeo wa kureta

Aina Maelezo
Mabaki ya Node Kitumia mabaki ya miongo.

Msaada wa vifaa vya kureja

element.replaceChild() Ni DOM Level 1 (1998) mafanikio.

Wote wengi wa vifaa vya kureja vilivyocheza vizuri:

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