Method appendChild() ya HTML DOM Element

Maelezo na matumizi

appendChild() Method inayotumia kuingiza ukosefu (element) kama mwanafikia wa kwanza wa element.

Tazama pia:

insertBefore() method

replaceChild() method

removeChild() method

remove() method

childNodes mafuta

firstChild mafuta

lastChild mafuta

firstElementChild mafuta

lastElementChild mafuta

Method zingine za orodha:

Method createElement()

Method createTextNode()

Mfano

Mfano 1

Kuongeza mada katika orodha:

const node = document.createElement("li");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);

Kabla ya kuongeza:

  • Kahawa
  • Chai

Baada ya kuongeza:

  • Kahawa
  • Chai
  • Mchana

Tenda kwa matokeo

Mfano 2

Kuondoa kipya kutoka orodha yote kwenda orodha nyingine:

const node = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1").appendChild(node);

Kabla ya kumshika:

  • Kahawa
  • Chai

  • Mchana
  • Mzuri

Kisha kumshika:

  • Kahawa
  • Chai
  • Mzuri

  • Mchana

Tenda kwa matokeo

Mifano 3

Kumekadiri kitabu na matukio

  • Kumekadiri kitabu
  • Kumekadiri mtokeo wa kitabu
  • Kuandaa mtokeo wa kitabu kwa mawasiliano
  • Kuandaa mawasiliano kwa mawasiliano

Kumekadiri <p> kwa kusaidia kufikia matokeo wa <div>.

const para = document.createElement("p");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.getElementById("myDIV").appendChild(para);

Tenda kwa matokeo

Mifano 4

Kumekadiri <p> kwa kusaidia kufikia matokeo wa kuzingatia.

const para = document.createElement("P");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.body.appendChild(para);

Tenda kwa matokeo

Inayofanywa kwa lugha

element.appendChild(node)

au

node.appendChild(node)

Chaguo

Chaguo Maelezo
node Inayohitajika. Mtokeo wa kuongeza.

Matokeo

Aina Maelezo
Mtokeo Mtokeo wa kuongeza.

Mwongozo wa vifaa vya kusoma

element.appendChild() Ni Hisabu ya DOM Level 1 (1998) ya ujumbe.

Wote wa vifaa vya kusoma vinaongea kwa ufanana:

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