Cara Merubah Nilai HTML dengan jQuery

belajar javascript

Dalam tutorial belajar jQuery sebelumnya, kita sudah mempelajari cara mengambil nilai HTML dengan jQuery. Saat ini saya akan mengulas cara merubah nilai elemen HTML dengan jQuery.

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

Untuk merubah nilai elemen HTML, caranya sangat serupa dengan mengambil elemen. Bedanya, kita menyisipkan sebuah argumen ke dalam method text() dan html(). Langsung saja kita lihat misalnya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Infanthree</title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
 
     $("#tombol").click(function() {
       $("#paragraf1").text("<b>#jQuery</b> is Amazing...");
       $("#paragraf2").html("<b>#jQuery</b> is Amazing...");
     })
 
   });
   </script>
</head>
<body>
<p id="paragraf1">
   Sedang belajar jQuery di Infanthree...
</p>
<p id="paragraf2">
   Sedang belajar jQuery di Infanthree...
</p>
<button id="tombol">Change!</button>
</body>
</html>

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

Perhatikan cara penggunaannya yang amat serupa dengan tutorial kita sebelumnya (mengambil nilai HTML). Bila method text() dan html() diisi dengan argumen, ini berarti kita mau merubah isi element HTML, bukan mengambil nilainya. Konsep semacam ini umum dipakai di dalam jQuery.

Kode:

$("#paragraf1").text("<b>#jQuery</b> is Amazing...");

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

Begitu pula dengan perintah kedua:

$("#paragraf2").html("<b>#jQuery</b> is Amazing...");

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

Seperti yang tampak, method html() akan memproses tag HTML yang terdapat di dalam teks. Pada contoh diatas, teks #jQuery akan jadi tebal sebab efek tag <b>. Sedangkan untuk method text(), teks akan ditampilkan apa adanya, dimana tag <b> dianggap sebagai teks biasa, bukan sebuah tag HTML.

Cara Merubah Nilai Form HTML dengan Method val()

Untuk form HTML, kita juga dapat merubah nilai yang ada, atau tepatnya merubah nilai atribut value dari objek form itu. Cara penggunaannya hampir sama dengan method text() dan html(), namun saat ini kita memakai method val(). Berikut misalnya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Infanthree</title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
 
     $("#tombol").click(function() {
       $("#nama").val("Joko Sulistyo");
     })
 
   });
   </script>
</head>
<body>
Nama: <input type="text" id="nama">
<button id="tombol">Change!</button>
</body>
</html>

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

Dengan menggabungkan cara mengambil dan merubah nilai elemen HTML, kita dapat membuat sebuah kode program yang secara dinamis akan bertukar bergantung inputan user. Berikut misalnya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Infanthree</title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
 
     $("#tombol").click(function() {
       var nilai = $("#kotak_isian").val();
       $("#target").html(nilai);
     })
 
   });
   </script>
</head>
<body>
Input Text: <input type="text" id="kotak_isian">
<button id="tombol">Salin!</button>
<p id="target">placeholder...</p>
</body>
</html>

Saat tombol Salin! di klik, perintah var nilai = $(“#kotak_isian”).val() dipakai untuk mengambil isi form, dan disimpan ke dalam variabel nilai. Variabel nilai ini kemudian dipindahkan ke dalam paragraf melalui perintah $(“#target”).html(nilai).

Silahkan kamu ketik teks apa saja ke dalam form, lalu klik tombol Salin!. Isian form itu akan tampil ke dalam paragraf dibawahnya.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

WhatsApp chat