Menetapkan Nilai Dengan JQuery

Jika pada materi sebelumnya kita telah mempelajari bagaimana caranya mengambil nilai data dari elemen HTML menggunakan JQuery, maka pada materi kali ini, kita akan mempelajari cara untuk mensetting / menetapkan nilai pada elemen HTML dengan JQuery.

Sebenarnya, cara untuk mensetting nilai pada elemen adalah sama seperti ketika kita ingin mendapatkan nilai dari suatu elemen, yakni menggunakan method val(), html(), text(), dan attr(). Perbedaanya, jika ketika kita ingin mendapatkan nilainya kita tidak perlu menuliskan parameternya, sedangkan ketika ingin mensetting nilainya kita juga perlu mensetting nilai parameternya pada ke 4 method di atas. Parameter inilah yang nantinya akan menjadi nilai bagi elemen tersebut.

Contoh, ketika mensetting nilai pada input form, maka penulisan method val() – nya adalah : val( 21 ) / val(‘hallo dunia’) dan sebagainya.

Menambah elemen baru pada jquery dengan method html()

Untuk menambah konten baru dengan fungsi elemennya juga, anda dapat menggunakan method html(). Contoh :

Di bawah ini adalah hasilnya ketika button sudah di klik. Dimana elemen <a> juga dapat berfungsi sebagai text link yang akan membuka halaman website https://www.lautankode.com.

metenapkan nilai pada jquery

Live Preview :

See the Pen
Menetapkan nilai dengan JQuery
by Lautankode (@lautankode)
on CodePen.


Memberi nilai text menggunakan jquery dengan method text()

Sedangkan, jika anda hanya ingin mensetting kontennya saja tanpa fungsionalitas dari elemennya. Maka anda dapat menggunakan method text(). Contoh :

Dan di bawah ini adalah hasilnya, dimana ketika anda klik button di bawahnya, maka tulisan “Text Lama” akan digantikan dengan kalimat “Ini adalah teks baru”.

fungsi method text pada jquery

Live Preview :

See the Pen
fungsi method text() pada jquery
by Lautankode (@lautankode)
on CodePen.


Memberi nilai pada JQuery menggunakan method val()

Dan jika anda ingin mensetting nilai ke dalam sebuah input form, method yang harus anda gunakan adalah method val(). Contoh :

Gambar di bawah ini adalah hasilnya, dimana ketika anda klik kedua button di bawahnya, maka secara otomatis nilai akan tertambahkan ke dalam input form, yakni input variable x dan y.

fungsi method val() pada jquery

Live Preview :

See the Pen
Fungsi method val() pada JQuery
by Lautankode (@lautankode)
on CodePen.


Memasukan nilai atribut pada JQuery dengan method attr()

Terakhir, jika anda ingin mensetting nilai sebuah atribut yang dimiliki oleh sebuah elemen. Maka, method yang harus anda gunakan adalah method attr(). Contoh :

Dan di bawah ini adalah hasilnya, namun saat kondisi tombol button belum di klik.

fungsi method attr() pada jquery

Sedangkan di bawah ini adalah kondisi ketika tombol button sudah di klik, dimana dapat anda lihat terdapat atribut target yang dimasukan ke dalam elemen <a>, dan bandingkan saja dengan gambar sebelumnya.

cara menginput nilai attribut

Live Preview :

Pada Live Prieview di bawah ini silahkan pertama – tama anda coba untuk mengklik teks hyperlink nya lebih dulu yakni tulisan Lautan Kode, maka hasilnya akan terbuka pada kotak dialog live preview, kemudian anda re run kembali Live Previewnya, dan anda klik button set href target, maka hasilnya akan terbuka pada tab baru.

Hal ini terjadi karena ada penambahan attribut target=”_blank”.

See the Pen
Memasukan nilai attr pada JQuery
by Lautankode (@lautankode)
on CodePen.


Demikian tutorial dari Menetapkan Nilai Dengan JQuery.

Leave a comment

Your email address will not be published. Required fields are marked *

× Contact Us