jQuery .html(), .text() dan .val()
Tabel Konten
.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>
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:
.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);
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:
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> kemudian menyimpannya ke dalam variabel
$('#duplikat').html(duplikat); //memproduksi kode HTML dari nilai <textarea>
});
});
14 Komentar
Unknown
mas mau tanya nih, besar harapan mas menjawab dan menjelaskannya ^_^
saya mau bikin sebuah form daftar alumni, yang didalamnya terdapat input:
photo
nama
angkatan
pekerjaan
dll
nah saya maunya itu satu halaman di blogspot, atau mungkin sebuah post di blogspot, tapi ketika ada orang yang mengisi formulir tersebut, hasil isiannya langsung tampil diatas form tersebut, dan juga masuk dalam pendataan di google docs, bisa ga ya mas, kalo bisa, mohon dijelasin ya mas, sangat diperlukan... ga papa deh di posting lain juga mas, asalkan link-kan di jawaban komentar saya mas :)
budkalon
Hmmmm... bisa, tapi mungkin untuk sementara, karena kalau sobat keluar dari laman/ mereload laman, maka isi dari form tersebut akan hilang lagi :(
Unknown
wah mas, kalo seandainya pake sistem kaya komentar gitu kira-kira bisa diterapin ga yah??
*tapi saya juga ga ngerti sistem komentar kaya gimana :o
budkalon
Kalau begitu harus punya dulu databasenya, untuk menyimpan nama-nama anggota member.
tetapi blogger tidak mendukung progrm PHP. Cobalah Wordpress, di sana sangat banyak sekali hal yang dapat dilakukan :)
Unknown
iya juga sih yah, saya kira bisa gitu dengan bantuan jquery/ ajax kita ngambil data yang ada di google docs... :)
budkalon
hoho, mungkin bissa :D Tapi itu sedikit(sangat) rumit, karena kita akan kesulitan saat mengambil datanya, tidak seperti feed blog yang dapat diakses melalui /feeds/posts/default atau sebagainya yang mendukung Json :(
Kang IM
yang paling sederhana, kalau formulir dan sheetnya di iframe saja gimana?
Kang IM
Komentar ini telah dihapus oleh pengarang.
Unknown
saya nunggu jawaban dari admin (mas taufik) nih, siapa tau ada solusi lain :)
Unknown