Saat Anda memanggil metode appendChild() , metode ini akan menambahkan elemen yang baru dibuat setelah anak terakhir dari elemen di dalam elemen induk
Yang mirip dengan metode append()
const boxWrapper = document.getElementById("box-wrapper"); const box = document.createElement("div"); box.innerHTML = 'div <br> 5'; box.style.backgroundColor = "orange"; box.classList.add("box"); boxWrapper.appendChild(box);Tetapi ada beberapa perbedaan utama antara metode append() dan appendChild()
Cobalah
Lihat Pen appendChild() JavaScript #1 oleh SoftAuthor (@softauthor) di CodePen
2. Tambahkan Beberapa Elemen Anak Sebagai Saudara
Berbeda dengan metode append(), appendChild() hanya memungkinkan Anda menambahkan satu elemen dalam satu kueri
Jika Anda ingin menambahkan lebih banyak elemen turunan untuk induk yang sama, Anda harus memanggilnya lagi dengan elemen baru sebagai argumen
const boxWrapper = document.getElementById("box-wrapper"); const box5 = document.createElement("div"); box5.innerHTML = 'div <br> 5'; box5.style.backgroundColor = "orange"; box5.classList.add("box"); const box6 = document.createElement("div"); box6.innerHTML = 'div <br> 6'; box6.style.backgroundColor = "orange"; box6.classList.add("box"); boxWrapper.appendChild(box5); boxWrapper.appendChild(box6);_3. Tambahkan Elemen Anak Bersarang Satu Di Dalam Yang Lain
Menggunakan appendChild(), kita dapat dengan mudah menambahkan satu elemen di dalam elemen lain dengan merantai metode appendChild()
Berbeda dengan metode append(), metode appendChild() mengembalikan elemen yang ditambahkan
Seperti yang Anda lihat, saya telah memanggil metode appendChild() pada objek boxWrapper
Argumennya adalah Objek. assign() yang merupakan salah satu cara termudah untuk membuat rantai appendChild() untuk menambahkan elemen turunan bersarang
Dibutuhkan dua argumen
- Elemen yang ingin Anda buat, seperti div atau tombol
- Objek JavaScript tempat Anda akan menambahkan satu atau beberapa properti untuk elemen tersebut
Di sini, saya pertama kali menambahkan elemen div yaitu kotak 5
Kemudian, saya telah merantai metode appendChild() untuk menambahkan elemen anak di dalam elemen kotak 5 yang merupakan tombol
Dalam metode ini, pertama-tama kita memilih div dengan menggunakan salah satu pemilih i. e. getElementById, getElementByTag, querySelector, dll. Kami kemudian menambahkan data ke atribut innerHTML dari div. Metode ini memiliki satu kelemahan. itu menghapus semua pendengar acara yang ada pada div yang dipilih. Itu juga akan menghancurkan semua node yang ada di dalamnya dan menggantinya dengan yang baru. Semua referensi ke elemen akan hilang
var targetDiv = document.getElementById('ID'); targetDiv.innerHTML += 'data that you want to add';
Gunakan var targetDiv = document.getElementById('ID'); var content = document.createTextNode("data that you want to add"); targetDiv.appendChild(content); _1 untuk Menambahkan Data ke Div di JavaScript
Seperti metode sebelumnya, pertama kita pilih div dengan menggunakan salah satu pemilih. Tapi alih-alih innerHTML, kami menggunakan var targetDiv = document.getElementById('ID'); var content = document.createTextNode("data that you want to add"); targetDiv.appendChild(content); 1 karena masalah yang dibahas dalam metode sebelumnya. Sebelum menambahkan anak, kita harus membuat simpul teks
var targetDiv = document.getElementById('ID'); var content = document.createTextNode("data that you want to add"); targetDiv.appendChild(content); _
Gunakan var targetDiv = document.getElementById('ID'); var content = document.createTextNode("data that you want to add"); targetDiv.appendChild(content); _5 untuk Menambahkan Data ke Div di JavaScript
Seperti metode kedua, metode ini merupakan alternatif yang lebih baik dari metode pertama. var targetDiv = document.getElementById('ID'); var content = document.createTextNode("data that you want to add"); targetDiv.appendChild(content); 5 tidak mengurai ulang elemen, dan juga tidak mengganggu elemen yang ada di dalamnya. Ini jauh lebih cepat daripada innerHTML. Ini juga membantu kami menentukan posisi untuk memasukkan data. Seperti metode sebelumnya, pertama-tama kita pilih div, lalu kita gunakan var targetDiv = document.getElementById('ID'); var content = document.createTextNode("data that you want to add"); targetDiv.appendChild(content); 5 untuk menambahkan data pada posisi yang dibutuhkan
var targetDiv = document.getElementById('ID'); targetDiv.insertAdjacentHTML('afterend', 'data that you want to add');
Gunakan var targetDiv = document.getElementById('ID'); targetDiv.insertAdjacentHTML('afterend', 'data that you want to add'); _0 jQuery untuk Menambahkan Data ke Div
Fungsi append mengambil input dari konten yang perlu ditambahkan dan dapat dipanggil langsung pada tag menggunakan sintaks jQuery. Metode ini juga memiliki semua kelemahan metode innerHTML