Di video sebelumnya kita telah membahas mengenai DOM Manipulation untuk empat materi pertama, yaitu text, style, attribute dan classlist. Namun setelah membahas mengenai classlist, ternyata videonya sudah terlalu panjang, sementara materi mengenai manipulasi element masih banyak. Jadi saya memutuskan untuk memisahkan materi mengenai cara manipulasi element menjadi satu video khusus, yaitu video ini.

Kita akan memulai cara manipulasi element HTML dari materi yang paling mudah terlebih dahulu ya, yaitu cara menghapus Element. Jadi kita bisa menghapus element-element HTML dengan menggunakan Javascript. Ada 2 method yang bisa kita gunakan disini, yaitu removeChild() dan remove().

Method removeChild() adalah DOM versi lama. Cara penggunaannya lebih rumit, namun compatible dengan browser versi lama seperti Internet Explorer. Apabila teman-teman sedang mengembangkan situs yang memerlukan backward compatibility hingga ke browser versi lama, maka teman-teman bisa menggunakan removeChild(). Namun apabila teman-teman tidak peduli dengan browser versi lama, dan ingin melakukan pemograman dengan cara yang lebih mudah, maka bisa menggunakan method kedua, yaitu remove().

Kita langsung coba coding ya. Kita buka lagi source code yang telah kita gunakan pada video sebelumnya. Bisa dilihat di layar bahwa source codenya telah saya bersihkan dari coding sebelumnya. Kode html hanya mengandung attritube id, tanpa ada attritube class. Tidak ada CSS dan jumlah tag-nya sudah saya kurangi. Sedangkan kode javascript-nya kosong. Dan kalau kita jalankan di browser hasilnya seperti ini.

Pada bagian paling atas adalah Judul Halaman. Kemudian diikuti oleh daftar angka, yaitu Daftar Pertama, Daftar Kedua dan Daftar Ketiga. Dan dibawahnya ada gambar. Kita akan mencoba untuk membuang tulisan Daftar Kedua.

Kita lihat ke kode HTML. Perhatikan bahwa tulisan Daftar Kedua berada di dalam element li. Kita akan coba untuk hilangkan tulisan ini dengan menggunakan method removeChild. Cara menggunakan method ini sedikit lebih repot, karena kita harus mengetahui terlebih dahulu parent dari element li. Jadi kita mesti lihat lagi kode HTML-nya ya. Element li ini berada di dalam element ol dengan id numbers. Element ol ini adalah parent-nya.

Kita buka kode Javascript. Kita tambahkan komentar dahulu ya, yaitu removeChild. Kita tulis kode pertama kita. Kita mesti mengambil parent element terlebih dahulu. Jadi kita buat variable dengan nama parent yang nilainya diambil dari document.getElementById(“numbers”).

let parent = document.getElementById("numbers");

Kemudian kita mesti mengambil element yang hendak kita buang. Kalau kita lihat kembali di kode HTML, element li Daftar Kedua tidak memiliki attribute id. Apabila kita diperbolehkan untuk menambahkan attribute id, maka kita tinggal memberikan id unik dan mengambilnya menggunakan getElementById. Namun, apabila kita tidak mau menambahkan id, maka solusi lainnya adalah menggunakan querySelector.

Kita buat variable baru child, yang isinya diambil dari parent.querySelector. Disini kita menggunakan selector dari bahasa css ya. Yang ingin kita ambil adalah element li. Kemudian kita menggunakan pseudoclass nth-of-type dengan argument angka 2. Ingat bahwa pada bahasa CSS, index dimulai dari angka 1, bukan dari angka 0.

let child = parent.querySelector("li:nth-of-type(2)");

Dan langkah berikutnya, kita memanggil method parent.removeChild, dan kita gunakan variable child sebagai argumentnya.

parent.removeChild(child);

Kita simpan dan jalankan di browser. Dan sekarang tulisan Daftar Kedua hilang. Artinya kita sudah berhasil menghapus element HTML dengan menggunakan Javascript.

Kita ubah dahulu kode Javascript kita menjadi komentar ya. Kita refresh browser dan sekarang tulisan Daftar Kedua muncul kembali. Kita akan mencoba untuk menghapusnya menggunakan method yang lebih baru, yaitu method remove. Method ini lebih mudah untuk digunakan karena tidak perlu mengambil parent element. Namun method ini tidak compatible dengan browser lama seperti Internet Explorer.

Untuk menggunakannya, kita cukup memilih element yang hendak kita hapus. Kita gunakan querySelector. Namun berhubung kita tidak memiliki variable parent, maka kita harus memanggil querySelector dari document. Pertama kita pilih id numbers dahulu. Kemudian kita pilih element li di dalam numbers, dan kita gunakan pseudoclass nth-of-type(2). Setelah mendapatkan element yang hendak dihapus, kita cukup memanggil method remove-nya.

let element = document.querySelector("#numbers li:nth-of-type(2)");
element.remove();

Kita simpan dan jalankan di browser. Dan sekarang tulisan Daftar Kedua turut menghilang. Jadi ini adalah cara yang lebih baru untuk menghapus element HTML dengan menggunakan Javascript.

Selanjutnya kita akan belajar mengenai cara membuat element baru HTML dengan menggunakan Javascript. Ada 2 method penting terkait dengan hal ini, yaitu createElement() untuk membuat element baru. Dan createTextNode() untuk membuat teks yang akan dimasukkan ke dalam element tersebut.

Lalu ada beberapa method lagi yang perlu kita panggil untuk memasukkan element yang baru kita buat ke dalam kode HTML, yaitu appendChild, insertBefore dan replaceChild. Dari nama methodnya sebenarnya sudah ada gambaran kira-kira fungsi dari method ini seperti apa, namun untuk lebih jelas lebih baik kita coba langsung praktek.

Kita kembali ke kode. Kita akan menambahkan “Daftar Baru” pada ul numbers. Pertama kita komentari dahulu source code Javascript sebelumnya.

Pertama kita buat dahulu element baru ya. Kita buat variable element. Yang isinya kita ambil dari method document.createElement. Argument yang kita gunakan disini adalah jenis dari elemen yang hendak kita buat, yaitu “li”.

Tahap keduanya adalah kita membuat text yang akan disimpan di dalam element. Kita buat lagi variable text, yang isinya diambil dari method document.createTextNode. Argument yang digunakan adalah teks yang hendak kita simpan di dalam element, yaitu “Daftar Baru”.

Sekarang kita sudah memiliki dua buah variable ya, yaitu element dan text. Namun kedua variable ini masih belum terhubung. Untuk menghubungkannya, maka kita mesti memanggil method element.appendChild dan menggunakan variable text sebagai argumentnya. Sekarang element baru kita sudah mengandung teks “Daftar Baru”.

Langkah selanjutnya adalah kita harus menghubungkan element baru kita ke dalam kode HTML. Yang perlu kita ambil adalah element yang akan menjadi parent dari element baru ini. Kita lihat lagi ke kode HTML ya. Semua “li” daftar angka, berada di dalam ol dengan id numbers. Maka ol numbers ini adalah parent-nya. Kita bisa dengan mudah memilih element ini dengan menggunakan method getElementById dan kita simpan ke dalam variable parent.

Ada beberapa method yang bisa kita gunakan untuk menambahkan element baru ke dalam parent. Kita coba dari yang paling mudah terlebih dahulu ya, yaitu appendChild. Method ini akan menambahkan element baru ke bagian paling akhir dari parent.

let element = document.createElement("li");
let text = document.createTextNode("Daftar Baru");
element.appendChild(text);

let parent = document.getElementById("numbers");
parent.appendChild(element);

Kita simpan dan lihat hasilnya di browser. Perhatikan bahwa sekarang tulisannya adalah Daftar Pertama, Daftar Kedua, dan Daftar Ketiga. Kita akan menambahkan Daftar Baru di bagian paling akhirnya. Dan sekarang sudah muncul nomor empat dengan tulisan Daftar Baru. Jadi dengan mengikuti ketiga langkah ini, kita bisa menambahkan element baru pada kode HTML.

Kita sudah belajar mengenai cara menambahkan element pada bagian paling akhir dari parent. Sekarang kita masuk ke pertanyaan berikutnya. Bagaimana kalau kita ingin menambahkan element baru di bagian paling depan, atau di bagian tengah dari parent? Nah, untuk melakukannya, kita mesti menganti method appendChild dengan method insertBefore.

Sesuai dengan nama method-nya ya, insertBefore artinya kita hendak menambahkan element baru sebelum element tertentu. Tentunya kita mesti menentukan terlebih dahulu, kita hendak menambahkan element baru sebelum element yang mana. Kalau kita hendak menambahkan di bagian paling depan, artinya “Daftar Baru” berada di sebelum “Daftar Pertama”. Untuk melakukannya, kita mesti mengambil terlebih dahulu element “Daftar Pertama”.

Kita bisa melakukan seleksi element “Daftar Pertama” dengan memanggil method parent.querySelector. Sama seperti sebelumnya, kita menggunakan pseudoclass untuk mengambil li pertama.

let sibling = parent.querySelector("li:nth-of-type(1)");

Kita komentari dahulu kode sebelumnya yang menggunakan appendChild. Selanjutnya kita gunakan method insertBefore.

parent.insertBefore(element, sibling);

Sekarang Daftar Baru sudah berada di bagian paling atas. Kalau kita ingin menggantinya menjadi sebelum Daftar Kedua, kita tinggal mengganti nilai dari argument nth-of-type menjadi 2.

Selanjutnya kita coba method replaceChild. Sesuai dengan namanya, method ini akan mengganti element yang kita pilih menjadi element baru. Kita copy kode insertBefore, kita ubah menjadi komentar, lalu kita copy kodenya dibawahnya dan ubah methodnya menjadi replaceChild. Argument yang digunakan tetap sama, argument pertama adalah element baru, sedangkan argument kedua adalah elemen yang hendak diganti.

Kalau kita lihat hasilnya di browser, sekarang tulisan Daftar Kedua telah menghilang, karena diganti menjadi tulisan Daftar Baru. Jadi teman-teman sudah melihat sendiri ya, cara menggunakan dan perbedaan antara method applyChild, insertBefore dan updateChild.

Berikutnya kita bisa melihat beberapa method baru yang bisa kita gunakan untuk manipulasi element. Namun perlu diingat bahwa method ini hanya bisa berjalan di browser versi baru, dan tidak bisa berjalan di browser lama seperti Internet Explorer. Dan berhubung method ini lebih baru, tentunya method ini menawarkan cara yang lebih mudah dan flexible dalam melakukan manipulasi.

Dari namanya kita sudah bisa menebak fungsi dari method tersebut. Append berfungsi untuk menambahkan element baru sebagai anak terakhir. Prepend berfungsi untuk menambahkan element baru sebagai anak pertama. Before berfungsi untuk menambahkan element baru sebagai sibling di bagian sebelumnya. Sedangkan After berfungsi untuk menambahkan element baru sebagai sibling di bagian sesudahnya. Dan yang terakhir replaceWith berfungsi untuk mengganti element yang bersangkutan dengan element lain.

Kita coba praktek. Kita komentari dahulu semua source code sebelumnya. Kita kembali menambahkan tulisan Daftar Baru, namun kali ini kita menggunakan method yang lebih baru.

Sama seperti sebelumnya, untuk menambahkan element baru, kita mesti memanggil method document.createElement(). Jenis element-nya adalah li. Dan seperti sebelumnya, element yang tercipta ini masih belum memiliki teks ya. Namun daripada kita membuat node Text dan melakukan appendChild, kita bisa membuat teksnya dengan cara lain yang lebih sederhana. Contoh pertamanya adalah dengan cara mengubah property innerText. Kita isikan dengan nilai “Daftar Baru”. Kemudian kita harus mengambil element yang akan menjadi parent dari element baru kita. Kita panggil method getElementById dengan argument numbers. Lalu kita panggil method parent.append(element) untuk menambahkan element baru pada bagian aktif Daftar Angka.

Kalau kita lihat hasilnya di browser, sama seperti kode sebelumnya pada waktu kita menggunakan appendChild ya. Hanya saja disini kita tidak membuat node teks, melainkan langsung mengubah property innerText, sehingga kodenya menjadi lebih sederhana.

Kelebihan dari method append ini adalah, argument yang kita berikan tidak harus berupa Node. Kita bisa menggunakan tipe data string sebagai argument. Sebagai contoh, kita coba append string “Skysen”. Maka setelah tulisan Daftar Ketiga, muncul tulisan Skysen. Kalau kita perhatikan lagi source code-nya, maka setelah li Daftar Ketiga, ada tambahan teks Skysen. Namun teks Skysen ini masih berada di dalam tag ol.

Berbeda dari method appendChild ya. Kita coba saja kalau methodnya kita ganti menjadi appendChild. Maka hasilnya adalah error, karena method appendChild tidak bisa menerima argument yang berupa string. Argumentnya harus berupa Node.

Kelebihan kedua dari method append adalah kita bisa menambahkan banyak argument sekaligus. Sebagai contoh, kita ubah kembali method menjadi append. Lalu kita tambahkan argument kedua yaitu string “Solution”. Maka sekarang tulisan setelah Daftar Ketiga adalah SkysenSolution. Kedua kata masih bergabung ya, karena kita tidak menambahkan spasi di tengahnya. Perhatikan bahwa semua argument yang kita kirim ke method append akan ditambahkan satu per satu pada bagian akhir tag ol.

Dan berhubung method append bisa menerima argument berupa string, maka kita bisa menggunakan method ini sebagai alternatif untuk menambahkan teks pada element baru. Jadi kita bisa mengganti kode yang tadinya menggunakan property innerText ini, menjadi menggunakan method append. Hasilnya tetap sama.

Tadi pada slide kita telah melihat ada beberapa method selain append ya. Kebanyakan dari method baru tersebut berfungsi sama seperti append. Bisa menggunakan argument berupa string dan bisa menerima banyak argument. Yang berbeda hanyalah posisi peletakan dari element barunya.

Kalau kita menggunakan method prepend, maka element baru ditaruh di bagian paling depan dari parent. Element baru terletak di dalam tag parent, sehingga berperan sebagai child.

Sedangkan kalau kita menggunakan method before, maka element baru dituliskan sebelum tag parent, dan berada di luar tagnya sehingga berperan sebagai saudara atau sibling. Perhatikan sebagai hasilnya, tulisan Daftar Baru berada di luar Daftar Angka lainnya. Dan kalau kita lihat di kode HTML-nya, tag li yang baru berada diluar dari tag ol.

Oleh karena itu, untuk menggunakan method before dan after, kita tidak boleh memilih parentnya. Yang perlu kita pilih adalah siblingnya. Sebagai contoh, kita pilih tulisan Daftar Kedua.

Kita buat variable baru sibling yang kita ambil dari querySelector(“li:nth-of-type(2)). Kemudian kita panggil method sibling.before dengan memberikan argument element. Perhatikan bahwa kalau kita menggunakan method before, maka Daftar Baru berada di sebelum Daftar Kedua.

Sedangkan kalau kita ganti methodnya menjadi after, maka Daftar Baru berada di setelah Daftar Kedua.

Ada method satu lagi ya, yaitu replaceWith. Apabila kita menggunakan method ini, maka element Daftar Kedua diganti menjadi element Daftar Baru. Perhatikan juga bahwa replaceWith bisa kita gunakan dengan argument berupa string. Jadi kalau element kita ganti menjadi string “Skysen”, maka tulisan Daftar Kedua berubah menjadi “Skysen”, namun berhubung tulisan “Skysen” tidak memiliki tag li, maka tampilannya berubah menjadi teks biasa.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.