WhatsApp-Button
Belajar jQuery (Part 3) - Manipulasi DOM dengan jQuery

Belajar jQuery (Part 3) - Manipulasi DOM dengan jQuery

  2017-12-15 11:23:17     aknovia     Dibaca 705 kali

 

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");
  1. 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>");

  1. 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");
  1. 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");
  1. 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>");
  1. 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>");
  1. 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");
  1. 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.wink

Penulis : Rizky Hady - Senior Programmer


Sukai/Like Fan Page Facebook Garuda Cyber Indonesia
Subscribe Channel Youtube Garuda Cyber Indonesia
Follow Instagram Garuda Cyber Indonesia
Chat Wa

Signup for Newsletter

Langganan Newsletter dari Garuda Cyber untuk mendapatkan informasi terupdate dari Garuda Cyber Indonesia