Metode Document.append() JavaScript menyisipkan sekumpulan Node atau objek string setelah anak terakhir dari Document. Ini mirip dengan metode Element.append() yang digunakan dengan objek Element
Sintaksis
Document.append(parameter1) Document.append(parameter1, parameter2, /* … , */ parameterN)Parameter
Satu atau lebih Node atau objek string
Nilai pengembalian
Metode append() tidak memiliki nilai pengembalian, yang berarti bahwa metode tersebut secara implisit mengembalikan let d = new Document(); let html = document.createElement('html'); d.append(html);0
Pengecualian
let d = new Document(); let html = document.createElement('html'); d.append(html);1 let d = new Document(); let html = document.createElement('html'); d.append(html);2
Dilempar ketika node tidak dapat disisipkan pada titik yang ditentukan dalam hierarki
Contoh
Berikut adalah contoh penggunaan metode JavaScript append()
Misalkan kita harus membuat dokumen HTML baru yang harus kita tambahkan elemen root (let d = new Document(); let html = document.createElement('html'); d.append(html);4) dengan JavaScript
Apa yang harus kita lakukan?
Bagaimana dengan membuat objek dokumen baru dan elemennya dan menggunakan metode append()?
let d = new Document(); let html = document.createElement('html'); d.append(html);_Alasan mengapa variabel dokumen kita adalah let d = new Document(); let html = document.createElement('html'); d.append(html);_6 dan bukan let d = new Document(); let html = document.createElement('html'); d.append(html);7 adalah karena variabel terakhir telah dideklarasikan
Metode JavaScript // Create a new paragraph element, and append it to the end of the document body let p = document.createElement("p"); document.body.appendChild(p);_0 digunakan untuk menyisipkan simpul baru atau memposisikan ulang simpul yang ada sebagai anak terakhir dari simpul induk tertentu
Daftar isi
- Sintaks JavaScript appendChild
- Apa itu metode JavaScript appendChild()?
- Poin-poin penting yang perlu diperhatikan. metode appendChild()
- JavaScript appendChild(). Contoh
- JavaScript appendChild() vs. menambahkan()
- Objek yang mendukung appendChild()
- Browser yang mendukung appendChild()
Sintaks JavaScript appendChild
parentNode.appendChild(childNode);_// Create a new paragraph element, and append it to the end of the document body let p = document.createElement("p"); document.body.appendChild(p);1 adalah simpul yang ingin kita tambahkan ke simpul induk // Create a new paragraph element, and append it to the end of the document body let p = document.createElement("p"); document.body.appendChild(p);2. // Create a new paragraph element, and append it to the end of the document body let p = document.createElement("p"); document.body.appendChild(p);0 akan mengembalikan anak yang ditambahkan
Apa itu metode JavaScript appendChild()?
JavaScript // Create a new paragraph element, and append it to the end of the document body let p = document.createElement("p"); document.body.appendChild(p);_0 adalah metode antarmuka Node, digunakan untuk menambahkan node (biasanya elemen) di akhir node induk yang ditentukan. Itu dapat dieksekusi pada node anak yang ada atau dengan membuat elemen baru
Membuat elemen
Untuk membuat elemen baru yang akan disisipkan di akhir simpul induk, pertama-tama gunakan // Create a new paragraph element, and append it to the end of the document body let p = document.createElement("p"); document.body.appendChild(p);5 untuk membuatnya, lalu // Create a new paragraph element, and append it to the end of the document body let p = document.createElement("p"); document.body.appendChild(p);0 untuk elemen yang baru dibuat
Elemen yang ada
Metode // Create a new paragraph element, and append it to the end of the document body let p = document.createElement("p"); document.body.appendChild(p);0 juga berfungsi pada simpul anak yang ada, yang dengannya Anda dapat memindahkannya ke posisi baru di dalam dokumen. Dalam kasus seperti itu, // Create a new paragraph element, and append it to the end of the document body let p = document.createElement("p"); document.body.appendChild(p);_0 memindahkan node anak tertentu dari posisinya saat ini ke posisi baru di akhir daftar node anak di bawah node induk yang ditentukan
Untuk menambahkan node anak yang sudah ada ke node lain, perhatikan bahwa tidak perlu menghapus node dari node induknya terlebih dahulu. Hal ini karena node tidak dapat hadir di dua posisi dalam dokumen yang sama secara bersamaan
Jadi, saat Anda menggunakan // Create a new paragraph element, and append it to the end of the document body let p = document.createElement("p"); document.body.appendChild(p);_0 untuk menambahkan node anak yang sudah ada ke node lain, node anak dihapus terlebih dahulu, lalu ditambahkan di posisi baru
JavaScript appendChild(). Contoh
1) Contoh sederhana
// Create a new paragraph element, and append it to the end of the document body let p = document.createElement("p"); document.body.appendChild(p);_2) Cara menggunakan metode // Create a new paragraph element, and append it to the end of the document body let p = document.createElement("p"); document.body.appendChild(p);_0
3) Cara memindahkan elemen yang ada di dalam dokumen yang sama menggunakan <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>How to use JavaScript appendChild()</title> </head> <body> <ul id="userprofile"> </ul> <script> function createMenuItem(name) { let li = document.createElement('li'); li.textContent = name; return li; } // get the ul#userprofile const userprofile = document.querySelector('#userprofile'); // add the user profile items userprofile.appendChild(createMenuItem('Profile')); userprofile.appendChild(createMenuItem('Settings')); userprofile.appendChild(createMenuItem('Log out')); </script> </body> </html>1
<ul id="list1"> <li>Chocolate</li> <li>Ice-cream</li> <li>Candy</li> </ul> <ul id="list2"> <li>Chips</li> <li>Smoothie</li> <li>Soda</li> </ul> // get list1 const firstList = document.querySelector('#list1'); // get the first child element const chocolate = firstList.firstElementChild; // get list2 const secondList = document.querySelector('#list2'); // append chocolate to list2 secondList.appendChild(chocolate)Poin-poin penting yang perlu diperhatikan. metode appendChild()
- 'Ditambahkan' pada dasarnya berarti 'lampirkan di bagian akhir'
- Anda dapat menggunakan <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>How to use JavaScript appendChild()</title> </head> <body> <ul id="userprofile"> </ul> <script> function createMenuItem(name) { let li = document.createElement('li'); li.textContent = name; return li; } // get the ul#userprofile const userprofile = document.querySelector('#userprofile'); // add the user profile items userprofile.appendChild(createMenuItem('Profile')); userprofile.appendChild(createMenuItem('Settings')); userprofile.appendChild(createMenuItem('Log out')); </script> </body> </html>_2 untuk membuat tiruan dari node sebelum menambahkannya di bawah induk baru. Namun, perlu diingat bahwa salinan node yang dibuat menggunakan <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>How to use JavaScript appendChild()</title> </head> <body> <ul id="userprofile"> </ul> <script> function createMenuItem(name) { let li = document.createElement('li'); li.textContent = name; return li; } // get the ul#userprofile const userprofile = document.querySelector('#userprofile'); // add the user profile items userprofile.appendChild(createMenuItem('Profile')); userprofile.appendChild(createMenuItem('Settings')); userprofile.appendChild(createMenuItem('Log out')); </script> </body> </html>3 tidak akan diperbarui secara otomatis
- Anda tidak dapat menggunakan metode // Create a new paragraph element, and append it to the end of the document body let p = document.createElement("p"); document.body.appendChild(p);_0 untuk menambahkan elemen milik dokumen lain. Untuk ini, pertama-tama Anda harus menggunakan <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>How to use JavaScript appendChild()</title> </head> <body> <ul id="userprofile"> </ul> <script> function createMenuItem(name) { let li = document.createElement('li'); li.textContent = name; return li; } // get the ul#userprofile const userprofile = document.querySelector('#userprofile'); // add the user profile items userprofile.appendChild(createMenuItem('Profile')); userprofile.appendChild(createMenuItem('Settings')); userprofile.appendChild(createMenuItem('Log out')); </script> </body> </html>_5 atau <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>How to use JavaScript appendChild()</title> </head> <body> <ul id="userprofile"> </ul> <script> function createMenuItem(name) { let li = document.createElement('li'); li.textContent = name; return li; } // get the ul#userprofile const userprofile = document.querySelector('#userprofile'); // add the user profile items userprofile.appendChild(createMenuItem('Profile')); userprofile.appendChild(createMenuItem('Settings')); userprofile.appendChild(createMenuItem('Log out')); </script> </body> </html>6 untuk mengimpor elemen asing, lalu gunakan // Create a new paragraph element, and append it to the end of the document body let p = document.createElement("p"); document.body.appendChild(p);0 untuk memasukkannya ke posisi yang diinginkan
- Anda dapat menggunakan metode <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>How to use JavaScript appendChild()</title> </head> <body> <ul id="userprofile"> </ul> <script> function createMenuItem(name) { let li = document.createElement('li'); li.textContent = name; return li; } // get the ul#userprofile const userprofile = document.querySelector('#userprofile'); // add the user profile items userprofile.appendChild(createMenuItem('Profile')); userprofile.appendChild(createMenuItem('Settings')); userprofile.appendChild(createMenuItem('Log out')); </script> </body> </html>_8 untuk menghapus anak dari suatu elemen
JavaScript appendChild() vs. menambahkan()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>How to use JavaScript appendChild()</title> </head> <body> <ul id="userprofile"> </ul> <script> function createMenuItem(name) { let li = document.createElement('li'); li.textContent = name; return li; } // get the ul#userprofile const userprofile = document.querySelector('#userprofile'); // add the user profile items userprofile.appendChild(createMenuItem('Profile')); userprofile.appendChild(createMenuItem('Settings')); userprofile.appendChild(createMenuItem('Log out')); </script> </body> </html>9 adalah API yang lebih baru yang memungkinkan Anda untuk memasukkan sekumpulan objek DOMString (selain objek Node) sebagai node teks yang setara di akhir daftar node anak dari node induk
Sintaks append()
parentNode.append()Perbedaan antara appendChild() dan append()
1. Node vs. objek DOMString
Tidak seperti <ul id="list1"> <li>Chocolate</li> <li>Ice-cream</li> <li>Candy</li> </ul> <ul id="list2"> <li>Chips</li> <li>Smoothie</li> <li>Soda</li> </ul> // get list1 const firstList = document.querySelector('#list1'); // get the first child element const chocolate = firstList.firstElementChild; // get list2 const secondList = document.querySelector('#list2'); // append chocolate to list2 secondList.appendChild(chocolate)_0, yang hanya memungkinkan Anda menambahkan objek Node dan mengembalikan objek Node yang ditambahkan, <ul id="list1"> <li>Chocolate</li> <li>Ice-cream</li> <li>Candy</li> </ul> <ul id="list2"> <li>Chips</li> <li>Smoothie</li> <li>Soda</li> </ul> // get list1 const firstList = document.querySelector('#list1'); // get the first child element const chocolate = firstList.firstElementChild; // get list2 const secondList = document.querySelector('#list2'); // append chocolate to list2 secondList.appendChild(chocolate)1 juga memungkinkan Anda menambahkan objek DOMString, dan tidak memiliki nilai balik
2. Lajang vs. Beberapa argumen
Selanjutnya, <ul id="list1"> <li>Chocolate</li> <li>Ice-cream</li> <li>Candy</li> </ul> <ul id="list2"> <li>Chips</li> <li>Smoothie</li> <li>Soda</li> </ul> // get list1 const firstList = document.querySelector('#list1'); // get the first child element const chocolate = firstList.firstElementChild; // get list2 const secondList = document.querySelector('#list2'); // append chocolate to list2 secondList.appendChild(chocolate)_2 memungkinkan Anda untuk menambahkan hanya satu node, sedangkan <ul id="list1"> <li>Chocolate</li> <li>Ice-cream</li> <li>Candy</li> </ul> <ul id="list2"> <li>Chips</li> <li>Smoothie</li> <li>Soda</li> </ul> // get list1 const firstList = document.querySelector('#list1'); // get the first child element const chocolate = firstList.firstElementChild; // get list2 const secondList = document.querySelector('#list2'); // append chocolate to list2 secondList.appendChild(chocolate)1 mendukung beberapa argumen - sehingga Anda dapat menambahkan beberapa node dan string