Diantara anda mungkin ada yang sering memanfaatkan web chat seperti pada Facebook, GTalk, dan lain sebagainya. Mungkin juga kita sering melihat fungsi komentar yang berjalan real time pada Facebook, Twitter, dan lain sebagainya. Dimana ketika kita melakukan POST komentar atau chat, halaman web tidak perlu melakukan reloading secara keseluruhan. Kita bisa membandingkan fungsi seperti yang ada pada situs detik, dimana setiapkali komentar, halaman akan melakukan refresh secara keseluruhan, hal ini akan sangat memberatkan client terutama yang memiliki bandwidth internet kurang memadai. Sudah seharusnya halaman yang diload hanya pada yang berubah saja. Jika kita melakukan post, ya seharusnya yang berubah hanyalah pada perubahan post itu saja.

Untuk melakukan itu, kita bisa memanfaatkan fungsional JQuery .append() untuk melakukannya. .append() berfungsi untuk menambahkan sebuah elemen, dengan isi seperti parameter yang akan ditunjukkan oleh fungsi tersebut. Sebagai contoh saya memiliki script seperti demikian :

Meskipun elemen dengan ID content adalah kosong, namun dengan fungsi javascript JQuery .append(), Div tersebut akan memiliki isi seperti yang diisikan oleh script tersebut. Hal ini sebenarnya mengambil fungsi dari fungsi utama javascript seperti yang pernah kita bahas di posting lalu tentang DOM.

FUNGSI .append() untuk web chat.
Saya akan menggabungkan dua tema posting yang lalu, yaitu DOM yang telah terwakili dengan fungsi JQuery disini dan Fungsi FORM yang ditambahkan tanpa perlu melakukan reloading sebuah halaman web. Namun, ingat, bahwa saya belum menambahkan fungsional database. Jadi masih bersifat contoh client side. Scriptnya kira-kira adalah seperti ini:

chat.html

   
Isi pertama
   
Isi kedua
   
Isi ketiga
   

Script ke dua adalah berupa javascript yang disimpan sebagai script.js, dan berisi sebagai berikut:

$("#submit_chat").click(function(anu){ //jika tombol submit_chat diklik, akan membuat variabel anu
   anu.preventDefault(); //menghindari aksi default browser ketika ada form aktif.. menjadi no-reload
   var obrol = $("#chat").val(); //membuat variabel obrol yang berisi value dari input #chat
   $("#centerbox").append("
"+obrol+"
").children(':last').hide().fadeIn(1000);//melakukan penambahan variabel obrol yang diapit dalam div isi, dalam div centerbox, dengan animasi fade IN
   
  var objDiv = document.getElementById("centerbox");
  objDiv.scrollTop = objDiv.scrollHeight;//agar variabel baru langsung tersorot ke bawah
  

 $("form#chatForm")[0].reset(); //mengclear isi form
     return false; 
});

Tugas utama dari .append() adalah menambahkan sebuah isi dari fungsi, menjadi elemen tambahan didalam div yang di dalamnya. Dalam kasus ini, saya menambahkan kata

"
"+obrol+"
"