.html() dipakai untuk mengambil/mengubah/menyisipkan elemen berupa kode HTML..text() dipakai untuk mengambil/mengubah/menyisipkan abjad berupa teks..val() dipakai untuk mengambil/mengubah/menyisipkan nilai dari elemen-elemen formulir. Misal: <input>, <select> dan <textarea>.
Kita ambil sebuah contoh, contohnya kita menciptakan elemen HTML ibarat ini:
<div id="elemen"></div>Setelah itu kita terapkan fungsi .html() untuk menyisipkan sesuatu ke dalamnya ibarat ini:
$('#elemen').html('<h1>Lorem ipsum <mark>dolor sit amet</mark></h1>');Hasilnya ialah #elemen akan disisipi beberapa elemen gres ibarat ini:
<div id="elemen"> <h1>Lorem ipsum <mark>dolor sit amet</mark></h1> </div>Berbeda dengan .text():
$('#elemen').text('<h1>Lorem ipsum <mark>dolor sit amet</mark></h1>');Meskipun kita menyisipkan aba-aba HTML ke dalam fungsi .text(), hasil yang ditampilkan tetaplah berupa teks bertuliskan tag HTML ibarat ini:
.val() dipakai khusus untuk mengambil data dari dalam elemen-elemen berupa formulir. Sebagai teladan kita buat elemen input dan kita akan menampilkan nilainya ke dalam tag <h1> ibarat ini:
<input type="text" value="Lorem Ipsum" /> <h1></h1>// Sisipkan nilai elemen input ke dalam tag heading var a = $('input').val(); $('h1').html(a);Pandangan Lebih Jauh
Saya tidak begitu yakin wacana seberapa banyak manfaat dari fungsi ini. Namun fungsi-fungsi jQuery ibarat .html(), .val() dan .text() sangat bermanfaat untuk Anda gunakan sebagai konsep dasar pembuatan generator berbasis teks, entah itu generator teks maupun generator HTML ibarat ini:
HTML
<div id="target"> <textarea></textarea> <button class="duplikating">Buat HTML »</button> </div> <div id="duplikat"></div> <div style="clear:both;"></div>CSS
#target, #duplikat { font:normal 12px 'Trebuchet MS',Arial,Sans-Serif; width:40%; height:250px; background:#fff; border:2px solid #666; padding:15px; margin:10px 10px 0px 0px; float:left; display:inline; } #target textarea { width:98%; height:200px; display:block; margin-bottom:5px; }jQuery
$(function() { $('button.duplikating').click(function() { var duplikat = $('#target textarea').val(); // Mengambil nilai dari <textarea> lalu menyimpannya ke dalam variabel $('#duplikat').html(duplikat); //memproduksi aba-aba HTML dari nilai <textarea> }); });