HTML DOM Element appendChild() yöntemi

Tanım ve kullanım

appendChild() Yöntem, bir düğümü (elementi) son alt element olarak elemente ekler.

Ayrıca bakınız:

insertBefore() yöntemi

replaceChild() yöntemi

removeChild() yöntemi

remove() yöntemi

childNodes özelliği

firstChild özelliği

lastChild özelliği

firstElementChild özelliği

lastElementChild özelliği

İlgili belge yöntemleri:

createElement() yöntemi

createTextNode() yöntemi

Örnek

Örnek 1

Listeye öğe eklenmesi:

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

Eklendikten önce:

  • Kahve
  • Çay

Eklendikten sonra:

  • Kahve
  • Çay
  • Su

Kişisel olarak deneyin

Örnek 2

Bir listeden diğerine liste öğesini taşıma:

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

Hareket ettikten önce:

  • Kahve
  • Çay

  • Su
  • Süt

Hareket ettikten sonra:

  • Kahve
  • Çay
  • Süt

  • Su

Kişisel olarak deneyin

Örnek 3

Metin içeren paragraf oluşturun:

  • Paragraf elementi oluşturun
  • Metin düğümü oluşturun
  • Paragrafa metin düğümü ekleyin
  • Belgeye paragraf ekleyin

Bir <p> elementi oluşturun ve <div> elementine ekleyin:

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

Kişisel olarak deneyin

Örnek 4

Bir <p> elementi oluşturun ve belge metnine ekleyin:

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

Kişisel olarak deneyin

Gramer

element.appendChild(node)

veya

node.appendChild(node)

Parametre

Parametre Açıklama
node Gerekli. Eklenecek düğüm.

Dönüş değeri

Tür Açıklama
Düğüm Eklenecek düğüm.

Tarayıcı Desteği

element.appendChild() Bu, DOM Level 1 (1998) özelliğidir.

Tüm tarayıcılar tamamen destekler:

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