Hay guys apa kabar semuanya..??
Sebelum kita mulai mari kita lebaran terlebih dahulu bagi yang menjalankan mumpung masih berbau lebaran dan liburan nh guys, Taqabbalallahu Minna Wa Minkum Wa Ja’alanallahu Minal ‘Aidin Wal Faizin, mohon maaf lahir dan batin. Di mulai hari yang bersih dari segala khilaf yang pernah terjadi, seperti hal nya pada artikel kali ini tentang Cara Menggunakan Fungsi before dan after jQuery dimana didalam dunia nyata khilaf adalah kesalahan yang tidak sengaja atau perbuatan yang sudah terjadi yang merupakan bagian dari .after() sedangkan kesalahan yang belum terjadi bisa diartikan .before() sebelum. Hehehe biar gak terlalu melenceng terlalu jauh mari kita langsung ke topik nya tentang pembahasan fungsi .before() dan .after() pada jQuery. Dengan menggunakan fungsi ini kita bebas meletakkan content sesudah atau sebelumnya bisa dikatakan dapat menempatkan posisi nya yaitu sebelum atau sesudahnya.
Pada studi case kali ini saya akan memberikan contohnya, dimana saya akan membuat beberapa tag html yang berbeda kemudian saya akan atur posisi dengan menggunakan fungsi .before() dan .after(). Seperti biasa teman – teman siapkan text editornya dan ketikkan script html nya persis seperti gambar di bawah ini
Kemudian save dengan nama index.html, dan jalankan pada browser nya maka hasilnya seperti gambar di bawah ini
Lanjut pada artikel tentang Cara Menggunakan Fungsi before dan after jQuery, load terlebih dahulu library jQuery nya
Atau teman – teman bisa ambil di website resminya jQuery.com, selanjutnya kita berikan fungsi .after() saya akan menempatkan tag div setelah tag h2 maka yang terjadi tag div berada setelah tag h2
Langkah berikutnya kita gunakan fungsi .before(), saya akan menempatkan tag p sebelum tag h1
Maka hasilnya seperti gambar di bawah ini
Selain itu juga kita bisa tambahkan cssnya supaya kita tahu lebih jelas, teman – teman tambahkan css nya seperti gambar di bawah ini
Maka hasilnya seperti ini
Bagaimana, tidak terlalu sukar bukan..??
Baik, sekilas pembahasan tentang Cara Menggunakan Fungsi before dan after jQuery dengan studi case yang sederhana. Mudah – mudahan bisa menjadi tambahan pengetahuan untuk kalian yang saat ini baru belajar tentang fungsi – fungsi dari jQuery, kalian juga bisa experimen sendiri dari studi case kali ini agar lebih memahami hasil output dari fungsi – fungsi jQuery nya.
Oke, terimakasih dan sampai jumpa.
Semoga bermanfaat 🙂