Pada artikel sebelumnya kita telah belajar tentang penggunaan selector pada jQuery. Selector ini sangat penting sekali dalam melakukan manipulasi DOM. Berikut ini adalah fungsi yang sering digunakan untuk memanipulasi DOM :

1. text()
   Berfungsi untuk mendapatkan isi text dari sebuah element, dan juga berfungsi untuk menimpa isi dari element tersebut dengan text. Text disini maksudnya text murni, meskipun berupa HTML sekalipun maka tidak akan diolah oleh browser menjadi tampilan. Contoh :
   HTML :
             <div id=bunga>Tumbuh</div>
   jQuery :
             Untuk mendapatkan isi, var isi = $(#bunga).text();
             Untuk menimpa isi, $(#bunga).text(Mekar);

2. html()
   Berfungsi untuk mendapatkan isi (sekaligus tag HTML) dari sebuah element, dan juga bisa berfungsi untuk menimpa isi dari element tersebut dengan text. Text ini nantinya akan diolah oleh browser menjadi tampilan. Contoh :
   HTML :
           <div id=tombol>
                  <button>Tekan</button>

                  </div>
   jQuery :
          Untuk mendapatkan isi,
                 var isi = $(#tombol).html();
          Untuk menimpa isi,
                 $(#tombol).text(<button>OK</button>);

3. val()
   Berfungsi untuk mendapatkan value dari form input (berupa tag input, select, dan textarea), dan juga berfungsi untuk menimpa value dari form input tersebut.Contoh :
   HTML :
            <input type=text id=nama value=Garuda />
   jQuery :
             Untuk mendapatkan value, var isi = $(#nama).val();
             Untuk menimpa value, $(#nama).val(Cyber Indonesia);

4. attr()
   Berfungsi untuk mendapatkan attribute dari sebuah element, dan juga berfungsi untuk menimpaattribute dari element tersebut.Contoh :
   HTML :
            <ahref=http://kucing.com id=link />
   jQuery :
            Untuk mendapatkan attribute,
                     var attribute = $(#link).attr();
            Untuk menimpa attribute,
                     $(#link).attr(http://www.garudacyber.co.id);

5. append()
   Berfungsi untuk menambahkan isi pada sebuah element dengan textdi akhir isi sebelumnya. Text ini akan diolah oleh browser menjadi tampilan.Contoh :
   HTML :
          <ulid=hitung>
              <li>Satu</li>
              <li>Dua</li>
          </ul>
   jQuery :
          $(#hitung).append(<li>Tiga</li>);

6. prepend()
   Berfungsi untuk menambahkan isi pada sebuah element dengan textdi awal isi sebelumnya. Text ini akan diolah oleh browser menjadi tampilan.Contoh :
   HTML :
      <ul id=hitung>
         <li>Dua</li>
         <li>Tiga</li>
      </ul>
   jQuery :
          $(#hitung).prepend(<li>Satu</li>);

7. after()
   Berfungsi untuk menambahkan isi pada sebuah elementselanjutnya dari element yang dipilih dengan text. Text ini akan diolah oleh browser menjadi tampilan.Contoh :
   HTML :
        <p>Ini aman.<p>
        <div id=tandai></div>
        <p>Ini akan tertimpa.</p>
   jQuery :
         $(#tandai).after(Garuda Cyber Indonesia);

8. before()
   Berfungsi untuk menambahkan isi pada sebuah elementsebelumnya dari element yang dipilih dengan text. Text ini akan diolah oleh browser menjadi tampilan.Contoh :
   HTML :
          <p>Ini akan tertimpa.</p>
          <div id=tandai></div>
          <p>Ini aman.</p>
   jQuery :
          $(#tandai).before(Garuda Cyber Indonesia);

Masih ada beberapa fungsi lagi yang masih belum kita bahas dalam memanipulasi DOM. Apa saja itu ? Silahkan tunggu artikel berikutnya.

Penulis : Rizky Hady - Senior Programmer