Javascript: Perbedaan dan Penjelasan append vs appendChild

Javascript: Perbedaan dan Penjelasan append vs appendChild

Assalamualaikum, wr. wb. teman-teman, pada pembahasan Javascript kali kita akan membahas tentang perbedaan antara append dan appendChild serta penjelasan keduanya. Hal ini tidak jarang membuat para developer javascript bingung. Oke maka dari itu mari kita bahas disini.

Keduanya merupakan method yang sering dipakai untuk memanipulasi Document Object Model (DOM). Mungkin buat kalian yang sering menggunakan method ini akan jarang menemukan perbedaan. Padahal aslinya terdapat perbedaan antara keduanya, walaupun terlihat memiliki fungsi yang sama. Berikut adalah beberapa perbedaannya

.append()

1. Digunakan untuk menambahkan element baik berupa object node maupun DOMSring. berikut contohnya:

// Menambahkan Node Object p pada div
const parent = document.createElement('div');
const child = document.createElement('p');
parent.append(child);
// Elemen dengan nama child akan ditambahkan ke parent
// Berikut outputnya 
// <div>
//  <p></p>
// </div>

// Menambahkan DOMString
const parent = document.createElement('div');
parent.append('Teks String');
// Berikut Outputnya
// <div>Teks String</div>

2. Tidak dapat mengembalikan value, berikut ini contoh kasusnya.

const parent = document.createElement('div');
const child = document.createElement('p');
const appendValue = parent.append(child);
console.log(appendValue)
// Output: undefined

3. Perbedaan terakhir, append dapat menambahkan banyak elemen atau item sekaligus, sedangkan appendChild tidak bisa, berikut contohnya.

const parent = document.createElement('div');
const firstChild = document.createElement('p');
const secondChild = document.createElement('span');
parent.append(firstChild, secondChild);
// Output: <div><p><span></span></p></div>

.appendChild()

1. Berbeda dengan append, appendChild hanya bisa menambahkan Node Object tapi tidak bisa untuk menambahkan elemen berupa DOM String

// Menambahkan Node Object p pada div
const parent = document.createElement('div');
const child = document.createElement('p');
parent.appendChild(child);
// Elemen dengan nama child akan ditambahkan ke parent
// Berikut outputnya 
// <div>
//  <p></p>
// </div>

// Menambahkan DOMString
const parent = document.createElement('div');
parent.appendChild('Teks String');
// Berikut Outputnya
// Uncaught TypeError: Failed to execute 'appendChild' on 'Node': ....

2. Berbeda dengan append, appendChild dapat mengembalikan value berupa Node Object yang ditambahkan seperti contoh berikut.

const parent = document.createElement('div');
const child = document.createElement('p');
const appendChildValue = parent.append(child);
console.log(appendChildValue)
// Output: <p></p>

3. Berbeda dengan append, appendChild hanya dapat menambahkan satu child saja. Meskipun kita menambahkan banyak child, tetapi yang akan ditambahkan hanya child pertama, yang lain akan diabaikan. Berikut contohnya.

const parent = document.createElement('div');
const firstChild = document.createElement('p');
const secondChild = document.createElement('span');
parent.appendChild(firstChild, secondChild);
// Output: <div><p></p></div>

Nah sudah tahu kan perbedaannya? jadi dapat kalian pertimbangkan lagi kapan waktunya menggunakan append dan kapan waktunya menggunakan appendChild. Sekian tips javascript kali ini, jika ada salah kata atau penjelasan saya mohon maaf, sekian Wassalamualaikum, wr. wb.

Thanks to my reference: Abdulqudus Abubakre on dev.to

Posting Komentar

2 Komentar

  1. Terimakasih sangat membantu saat sedang belajar DOM javascript

    BalasHapus