Tutorial Belajar jQuery Part 9: Cara Menambah Elemen HTML dengan jQuery

Posted on

Di panduan belajar jQuery Duniailkom kali ini saya akan membahas cara menambah elemen HTML baru dengan jQuery. Untuk ini kita akan mempelajari 4 method jQuery: append(), prepend(), after() dan before().


Cara Pemakaian Method append() dan prepend() jQuery

Method append() dan prepend() dapat digunakan untuk menambah faktor HTML baru ke di kode HTML yang telah ada. Method append() akan menambahkan faktor baru ke bagian ahir, sedangkan prepend() akan menambahkan faktor HTML baru ke bagian awal.

Yang perlu diarsipkan, kedua kegunaan ini menambahkan element baru ke di selector yang dicari. Berikut contohnya:

Di kode program diatas, saya mempunyai sebuah tag <div> dengan id=”box”. Di dalamnya terdapat sebuah tag <h2>.

Ketika tombol “Append” di klik, akan dijalan command berikut:

Ini maksudnya, tambahkan kode “<p>jQuery is Amazing…</p>” ke bagian ahir tag <div id=”box”>. Hasilnya ialah selaku berikut:

Dapat dilihat bahwa, element <p> akan ditambahkan ke bagian ahir di di tag <div id=”box”>. Hasil ini akan gampang dilihat bila rekan rekan mengaktifkan Web Developer Tools dari web browser, seperti gambar berikut:

Semacam itu pun ketika tombol “Prepend” di klik, command:

Akan menambah sebuah paragraf baru ke di tag <div id=”box”>, di posisi benar-benar awal. Berikut hasil yang di dapat:

Silahkan rekan rekan coba sendiri:

See the Pen Cara Menambah Elemen HTML dengan jQuery, append() dan prepend() by duniailkom (@duniailkom) on CodePen.10206


Cara Pemakaian Method after() dan before() jQuery

Method after() dan before() jQuery hakekatnya benar-benar mirip dengan append() dan prepend(). Bedanya terletak di posisi di mana element baru akan ditambahkan. Method after() dan before() akan menambahkan faktor baru di luar jQuery Selector.

Agar lebih jelas, mari jalankan kode yang sama dengan sebelumnya, dan hanya merubah method append() menjadi after() dan prepend() menjadi before():

See the Pen Cara Menambah Elemen HTML dengan jQuery, after() dan before() by duniailkom (@duniailkom) on CodePen.10206

Seandainya rekan rekan menjalankan kode diatas, hasilnya tampak sama persis seperti kode program kita sebelumnya. Namun method after() dan before() ini akan menambahkan faktor baru di sisi luar.

Ketika tombol “After” di klik, command berikut akan dijalankan:

Hasilnya ialah selaku berikut:

Perhatikan beda antara method append() dengan after(). Pedoman after() akan menampatkan tag <p> disisi luar, yakni setelah tag <div id=”box”>, bukan di di tag <div id=&#
8221;box”>
dari yang method append().

Semacam itu pun dengan method before(), hasilnya ialah selaku berikut:

Method before() akan menampatkan tag <p> sebelum dan diluar <div id=”box”>.

Di panduan belajar jQuery kali ini kita telah membahas cara menambahkan element baru ke halaman HTML. Apabila konsep ini digabung dengan teknik mengambil nilai dari form HTML (yang kita pelajari di beberapa panduan sebelumnya), kita dapat membangun halaman HTML yang dinamis. Inilah yang akan saya bahas berikutnya: Cara Menambah Isi Tabel HTML secara dinamis dengan jQuery.


Sumber https://www.duniailkom.com/