Hai teman-teman semuanya?kita lanjut lagi belajarnya, materi pembahasan kita masih seputar method-method yang ada pada jquery, sebelumnya saya sudah membahas sedikit banyak tentang method-method yang ada pada jquery kali ini kita akan belajar salah satu lagi method yang ada pada jquery yaitu .html() yang akan kita coba pada satu studi kasus menyisipkan konten dengan method html() pada jquery.
Fungsi dari method .html() ini ialah untuk menyisipkan konten dimana konten yang kita bisa bentuk dari script html, mungkin untuk lebih jelasnya kita langsung saja praktek, silahkan teman-teman buat sebuah file dan ketikan script berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").html("Hallo <b>Fahrizal</b>"); }); }); </script> </head> <body> <button>Tambah Konten</button> <p></p> </body> </html> |
Saya akan jelaskan secara garis besarnya, pertama saya membuat sebuah tombol dimana nanti tombol ini yang akan saya berikan fungsi script jquery, lalu saya membuat element html p kosong setelahnya.
Setelah itu saya mereload library dari jquery yang dapat kita ambil dari website resmi jquery yaitu jquery.com,
salu saya membuat script ini:
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function(){ $("button").click(function(){ $("p").html("Hallo <b>Fahrizal</b>"); }); }); </script> |
Script jquery dimana ketika tombol di klik maka element p akan disini oleh text hello fahrizal dan kata fahrizal akan tercetak tebal karena dihimpit oleh tag atau element b
jika diklik maka hasilnya akan seperti berikut ini:
Gimana teman-teman. cukup mudah bukan? mungkin untuk tutorial kali ini tentang menyisipkan konten dengan method html() pada jquery cukup sampai disini dulu, semoga tutorial yang singkat kali ini dapat bermanfaat untuk teman-teman semuanya, sampai bertemu lagi pada tutorial-tutorial berikutnya,
Terima kasih