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

Tabel Konten
  1. Pandangan Lebih Jauh 
    1. HTML 
    2. CSS 
    3. jQuery 
jQuery .text() dan .html()

.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:

jQuery .val()
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

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

    mas tolong di bantu untuk penulisan JS nya..
    hasil out put nya nanti jadi seperti ini mas :
    <div id='id1'>
    Click
    <div id='id2'>
    <script src="http://domain.com/test.js" type="text/javascript" />
    </div></div>
    tolong di bantu suhu untuk cara nulis script nya biyar hasil out put nya kaya di atas saya nyoba 50x gak bisa2

Komentar telah ditutup.