Tutorial Belajar jQuery Part 8: Cara Mengubah Nilai HTML dengan jQuery

Posted on

Di panduan belajar jQuery sebelumnya, kita telah mempelajari cara mengambil nilai HTML dengan jQuery. Kali ini saya akan membahas cara mengubah nilai elemen HTML dengan jQuery.


Cara Mengubah Nilai HTML dengan Method text() dan html()

Untuk mengubah nilai unsur HTML, caranya amat mirip dengan mengambil unsur. Bedanya, kita menyisipkan sebuah argumen ke di method text() dan html(). Seketika saja kita lihat contohnya:

Di kode program diatas, saya mempunyai 2 buah tag <p>, masing-masing dengan id paragraf1 dan paragraf2. Ketika tombol “Change!” di-klik, saya mengubah isi setiap paragraf dengan method text() dan html().

Perhatikan cara penggunaannya yang amat mirip dengan panduan kita sebelumnya (mengambil nilai HTML). Kalau method text() dan html() diisi dengan argumen, ini artinya kita ingin mengubah isi element HTML, bukan mengambil nilainya. Konsep seperti ini umum digunakan di di jQuery.

Kode:

Artinya, cari sebuah tag HTML dengan id=”paragraf1″, lalu ubah isi tag tersebut dengan string: “<b>#jQuery</b> is Amazing…”.

Seperti itu pun dengan pedoman kedua:

Artinya, cari sebuah tag HTML dengan id=”paragraf2″, lalu ubah isi tag tersebut dengan string: “<b>#jQuery</b> is Amazing…”.

Seperti yang terlihat, method html() akan memproses tag HTML yang terdapat di di teks. Di contoh diatas, teks #jQuery akan menjadi tebal karena efek tag <b>. Sedangkan untuk method text(), teks akan ditampilkan apa adanya, dimana tag <b> dianggap selaku teks biasanya, bukan sebuah tag HTML.

Silahkan kamu praktekkan seketika:

See the Pen Cara Mengubah Nilai HTML dengan jQuery by duniailkom (@duniailkom) on CodePen.10206


Cara Mengubah Nilai Form HTML dengan Method val()

Untuk form HTML, kita pun dapat mengubah nilai yang terdapat, atau tepatnya mengubah nilai atribut value dari objek form tersebut. Cara penggunaannya hampir sama dengan method text() dan html(), tapi kali ini kita menggunakan method val(). Berikut contohnya:

See the Pen Cara Mengubah Nilai Form HTML dengan jQuery by duniailkom (@duniailkom) on CodePen.10206

Ketika tombol Change! Di-klik, nilai dari tag <input type=”text”> akan diubah nilainya menjadi “Joko Sulistyo”.

Dengan menggabungkan cara mengambil dan mengubah nilai unsur HTML, kita dapat menyusun sebuah kode program yang secara dinamis akan bertukar tergantung inputan user. Berikut contohnya:

See the Pen Cara Mengambil Nilai Form HTML dengan jQuery by duniailkom (@duniailkom) on CodePen.10206

Ketika tombol Salin! di klik, pedoman var nilai = $(“#kotak_isian”).val() digunakan untuk mengambil isi form, dan disimpan ke di variabel nilai. Variabel nilai ini kemudian dipindahkan ke pad
a paragraf via pedoman $(“#target”).html(nilai).

Silahkan kamu ketik teks apa saja ke di form, lalu tekan tombol Salin!. Isian form tersebut akan tampil ke di paragraf dibawahnya.

Di panduan belajar jQuery kali ini kita telah membahas cara mengubah dan menyalin nilai elemen HTML. Namun bagaimana sekiranya yang saya inginkan yaitu menambahkan sebuah element baru ke di HTML? Kita akan pelajari di panduan berikutnya: Cara Menambah elemen baru ke dalam HTML dengan jQuery.


Sumber https://www.duniailkom.com/