Tambahkan elemen ke induk javascript

Metode appendChild dalam JavaScript diterapkan pada node induk di mana kita ingin menambahkan anak yang dibuat

parentNode.appendChild(childNode);
Parameter metode JavaScript appendChild()
Metode appendchild di javascript di JavaScript hanya membutuhkan satu parameter
childNode. Node yang ingin kita tambahkan ke node induk
Mengembalikan Nilai Metode JavaScript appendChild()
Metode appendchild dalam javascript mengembalikan simpul anak yang ditambahkan, tetapi jika childNode yang diteruskan adalah objek DocumentFragment yaitu, objek dokumen yang tidak memiliki induk, maka dalam kasus itu DocumentFragment yang kosong dikembalikan



Pengecualian metode JavaScript appendChild()
Tidak ada pengecualian atau kasus penggunaan luar biasa untuk metode appendchild di javascript
Namun, metode ini mungkin mengeluarkan beberapa peringatan luar biasa, jika batasan pohon DOM dilanggar, misalnya. jika salah satu dari kasus berikut terjadi
Jika induk dari childNode bukan Dokumen, DocumentFragment, atau Elemen
Jika penyisipan childNode akan menyebabkan siklus loop, yaitu. jika childNode adalah induk dari node induk yang dianggap
Jika childNode bukan DocumentType, DocumentFragment, Element atau CharacterData
Jika childNode adalah Text, dan parent node adalah Document
Jika childNode bertipe DocumentType, dan induknya bukan Document (karena doctype harus selalu merupakan turunan langsung dari dokumen)
Jika induk dari childNode adalah Document, dan childNode adalah DocumentFragment dengan lebih dari satu anak Elemen atau memiliki anak Teks
Jika penyisipan childNode akan mengarah ke Dokumen dengan dua elemen atau lebih sebagai turunan
Contoh
Dalam contoh di bawah ini, kami memiliki daftar tidak terurut dengan hanya 1 anak, dan kemudian menggunakan metode appendChild() JavaScript, kami menambahkan lebih banyak elemen anak ke daftar induk
// HTML starts here


  
    JavaScript appendChild() method
  
  
    

      
Home
    
  

  // JavaScript starts here
  

_



Output sebelum menggunakan metode appendChild()
Keluaran setelah menggunakan metode appendChild()
Bagaimana cara kerja metode JavaScript appendChild()?
Metode appendChild() JavaScript menambahkan simpul anak di akhir elemen induk yang ditentukan, tetapi jika anak yang diteruskan adalah referensi ke elemen anak yang ada dalam dokumen, maka metode appendChild() secara otomatis memindahkannya dari posisinya saat ini ke . kita tidak perlu khawatir tentang menghapus elemen dari satu induk dan kemudian menambahkan anak yang dihapus ke elemen induk baru, metode appendChild() secara otomatis melakukannya untuk kita
Mengambil contoh di atas, metode appendChild() dalam javascript dapat diterapkan ke elemen induk di DOM. Pertama-tama kita menangkap elemen induk tertentu menggunakan pemilih kueri, dan kemudian kita memanggil metode appendChild() pada induk tersebut, dengan meneruskan childNode atau fungsi yang akan membuat childNode, metode ini kemudian akan mengulang melalui simpul anak yang ada dari induk 



Lebih Banyak Contoh
Contoh 1. Menambahkan Beberapa Node Anak
Dalam contoh ini, kami menambahkan beberapa simpul anak ke elemen induk. Di sini, pertama-tama kita menangkap elemen induk daftar tak terurut, dan kemudian dengan bantuan metode appendChild(), kita memasukkan larik angka sebagai turunan ke dalam daftar induk
// HTML starts here


  
    JavaScript appendChild() method
  
  
    
List of childs
    

      
Click on Append Child button to append child elements in the list
    
    Append Child
  

  // JavaScript starts here
  


Output sebelum menggunakan metode appendChild()
Keluaran setelah menggunakan metode appendChild()
Contoh 2. Memindahkan Node Anak Di Dalam DOM
Kita juga bisa menggunakan metode appendChild() untuk memindahkan elemen anak, dari satu induk ke induk lainnya. Di sini, dalam contoh ini, kami memiliki dua daftar yang masing-masing memiliki Abjad dan elemen angka, yang kami lakukan di sini adalah, kami menangkap induk pertama dan setelah itu, kami juga mendapatkan anak pertama dari elemen induk pertama, lalu kami 



Ingat metode appendChild() memindahkan elemen dari satu induk ke induk lainnya, yang berarti segera setelah ditambahkan ke induk kedua, ia akan dihapus dari induk pertama, yaitu. itu tidak bisa ada di kedua tempat pada saat yang sama, tetapi jika kita ingin melakukannya, maka kita dapat membuat elemen baru yang sama dengan anak pertama dan kemudian dapat menambahkannya ke induk kedua alih-alih memindahkan yang asli
// HTML starts here


  
    JavaScript appendChild() method
  
  
    
First List
    

      
A
      
B
      
C
    

    
Second List
    

      
1
      
2
      
3
    
  

  // JavaScript starts here
  

Output sebelum menggunakan metode appendChild()
Keluaran setelah menggunakan metode appendChild()
Browser yang Didukung
Nama PerambanDidukung pada versi Versi Internet Explorer >= 6 (Agu 2001)Mozilla Firefox Versi >= 2 (Okt 2006)Versi Safari >= 3. 1 (Mar 2008) Versi Google Chrome >= 4 (Jan 2010) Versi Microsoft Edge >= 12 (Jul 2015)
 

			
Bagaimana cara menambahkan elemen baru sebagai anak pertama ke elemen induk?
			
Untuk menyisipkan elemen sebagai anak pertama menggunakan jQuery,  gunakan metode prepend() . Metode prepend( content ) menambahkan konten ke bagian dalam setiap elemen yang cocok. 
		
			
Bagaimana cara menambahkan kelas ke div induk di JavaScript?
			
Jika Anda ingin menambahkan kelas CSS baru ke div induk langsung elemen saat ini, Anda dapat  menggunakan properti parentElement . Anda juga dapat menggunakan properti parentNode sebagai ganti parentElement. Setelah kita memiliki elemen induk, kita dapat dengan mudah menambahkan kelas CSS yang diinginkan dengan cara biasa. 
		
			
Bagaimana cara menambahkan elemen dalam elemen JavaScript?
			
const node = dokumen. createTextNode("Ini adalah paragraf baru. "); Kemudian Anda harus menambahkan simpul teks ke elemen  para. appendChild(node);  Terakhir, Anda harus menambahkan elemen baru ke elemen yang sudah ada. 
		
			
Manakah metode untuk menambahkan elemen anak tambahan di simpul induk di JavaScript?
			
appendChild()  Metode appendChild() dari antarmuka Node menambahkan node ke akhir daftar anak dari node induk yang ditentukan. Jika anak yang diberikan adalah referensi ke simpul yang ada dalam dokumen, appendChild() akan memindahkannya dari posisi saat ini ke posisi baru.