Menambahkan Elemen menggunakan Jquery

Hello guys, salam coding!

Kali ini penulis ingin sharing tentang menambah elemen menggunakan jquery. Jquery merupakan framework (kerangka kerja) berbasis javascript yang digunakan untuk membuat website menjadi dinamis tanpa reload page.

Jquery memiliki tagline “Write less do more”. Artinya dengan menuliskan sedikit baris coding dapat melakukan banyak hal.

Hmmm.., keren bukan!

Mari kita mulai, pertama-tama Anda harus siapkan dulu Jquery.js atau jquery.min.js

Untuk mendapatkan jquery silahkan download jquery pada situs resminya www.jquery.com. Disini penulis menggunakan jquery versi 3.1.1. setelah mendapatkan Jquery, langkah berikutnya adalah menyisipkan file jquery pada halaman HTML kita. Adapun cara untuk menyisipkan jquery pada halaman HTML adalah sebagai berikut:

<script src="assets/jquery-3.1.1.js"></script>

Artinya file jquery-3.1.1.js berada dalam folder assets. Anda mungkin meletakkannya difolder berbeda atau anda satukan dengan file html anda. Penulis harap Anda dapat memahami struktur folder Anda masing-masing dan disesuaikan dengan struktur folder Anda.

Kerana jquery merupakan framework javascript, maka kita memanggilnya dengan tag <script></script> dan dapat disisipkan diantara tag <head></head>

atau sebelum tutup tag </body>.

Disini penulis meletakkannya diantara tag <head>

sehingga terlihat seperti code berikut:

<head>
            <meta charset="utf-8"/>
            <title>Menambahkan Elemen</title>
            <script src="assets/jquery-3.1.1.js"></script>
</head>

Nah, selanjutnya lengkapi kode html anda seperti berikut:

<html lang="id">
<head>
            <meta charset="utf-8"/>
            <title>Menambahkan Elemen</title>
            <script src="assets/jquery-3.1.1.js"></script>
</head>
<body>
            <h1>Selamat Datang </h1>
            <button type="button" id="btn1">Tampilkan</button>
</body>
</html>

Coding diatas akan menampilkan tulisan selamat datang dan sebuat tombol (button) tampilkan.

Jika diperhatikan, pada button tampilkan terdapat id=”btn1”. Id inilah yang akan kita gunakan untuk selector nantinya.

Nah, sekarang tambahkan kode berikut sebelum tutup tag </body>

<script>
                $('#btn1').click(function(){
                          $('h1').append("Sabahat mfikri.com");
                });
</script>

kode diatas berfungsi untuk menambahkan elemen “Sahabat mfikri.com” dibelakang tag <h1> setelah kata “Selamat Datang” dengan fungsi append dan trigernya (pemicu) click button.

Pada kode diatas terlihat tanda (#), artinya kita menyeleksi elemen berdasarkan id, sedangkan tanda titik (.), artinya kita menyeleksi elemen berdasarkan class. Jika tidak ada tanda (.) atau (#), artinya kita menyeleksi elemen berdasarkan tag html.

Ok, setelah menambahkan kode diatas maka terlihat coding lengkapnya seperti berikut:

<html lang="id">
<head>
            <meta charset="utf-8"/>
            <title>Menambahkan Elemen</title>
            <script src="assets/jquery-3.1.1.js"></script>
</head>
<body>
            <h1>Selamat Datang </h1>
            <button type="button" id="btn1">Tampilkan</button>
           
        <script>
                    $('#btn1').click(function(){
                             $('h1').append("Sabahat mfikri.com");
                    });
        </script>
</body>
</html>

Lalu simpan dengan ektensi (.html) dan jalankan di browser kesayangan anda. Klik tombol tampilkan dan lihat perbedaannya.

Ok guys, sekian dulu tutorial kali ini sampai jumpa di tutorial berikutnya.

-Thank you