jQuery .html(), .text() dan .val()

.html() digunakan untuk mengambil/mengubah/menyisipkan elemen berupa kode HTML..text() digunakan untuk mengambil/mengubah/menyisipkan karakter berupa teks..val() digunakan untuk mengambil/mengubah/menyisipkan nilai dari elemen-elemen formulir. Misal: <input>, <select> dan <textarea>.

Kita ambil sebuah contoh, misalnya kita membuat elemen HTML seperti ini:

<div id="elemen"></div>

Setelah itu kita terapkan fungsi .html() untuk menyisipkan sesuatu ke dalamnya seperti ini:

$('#elemen').html('<h1>Lorem ipsum <mark>dolor sit amet</mark></h1>');

Hasilnya adalah #elemen akan disisipi beberapa elemen baru seperti ini:

<div id="elemen">
    <h1>Lorem ipsum <mark>dolor sit amet</mark></h1>
</div>

Lihat Demo

Berbeda dengan .text():

$('#elemen').text('<h1>Lorem ipsum <mark>dolor sit amet</mark></h1>');

Meskipun kita menyisipkan kode HTML ke dalam fungsi .text(), hasil yang ditampilkan tetaplah berupa teks bertuliskan tag HTML seperti ini:

Lihat Demo

.val() digunakan khusus untuk mengambil data dari dalam elemen-elemen berupa formulir. Sebagai contoh kita buat elemen input dan kita akan menampilkan nilainya ke dalam tag <h1> seperti ini:

<input type="text" value="Lorem Ipsum" />
<h1></h1>

// Sisipkan nilai elemen input ke dalam tag heading
var a = $('input').val();
$('h1').html(a);

Lihat Demo

Pandangan Lebih Jauh

Saya tidak begitu yakin tentang seberapa banyak manfaat dari fungsi ini. Namun fungsi-fungsi jQuery seperti .html(), .val() dan .text() sangat bermanfaat untuk Anda gunakan sebagai konsep dasar pembuatan generator berbasis teks, entah itu generator teks maupun generator HTML seperti ini:

Generator HTML dengan jQuery

HTML

<div id="target">
    <textarea></textarea>
    <button class="duplikating">Buat HTML &raquo;</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> kemudian menyimpannya ke dalam variabel
        $('#duplikat').html(duplikat); //memproduksi kode HTML dari nilai <textarea>
    });
});

Demo Generator HTML Sederhana dengan jQuery