Menambahkan Elemen HTML Dengan JQuery

Menambahkan Elemen HTML Dengan JQuery

28

Pada tutorial kali ini kita akan mempelajari cara untuk menambahkan elemen HTML dengan JQuery.

Dalam halaman website anda juga dapat menambahkan elemen dengan mudah jika menggunakan JQuery, karena kodenya sudah diringkas di dalamnya, jadi tidak perlu penulisan kode yang terlalu panjang seperti penggunaan Javascript.

Terdapat 4 method yang umum digunakan dalam hal penambahan elemen ini, yakni :

  1. Append(), menambahkan elemen di akhir elemen yang menjadi acuan.
  2. Prepend(), menambahkan elemen di awal elemen yang menjadi acuan.
  3. After(), menambahkan elemen sesudah elemen yang menjadi acuan.
  4. Before(), menambahkan elemen sebelum elemen yang menjadi acuan.

Gambarannya seperti gambar di bawah ini, elemen yang menjadi acuan adalah elemen yang berada di tengah :

menambahkan elemen html dengan jquery

Method append(), digunakan untuk menambah elemen baru, sesudah elemen yang dijadikan sebagai elemen acuannya. Elemen baru ini akan muncul sebaris dengan elemen acuan.

XHTML

<!DOCTYPE html>

<html>

<head>

<script src="jquery-3.3.1.min.js"></script>

</head>

<body>

  <p>Bhineka Tunggal</p>

  <button>append()</button>



  <script>

  $(function(){

     $("button").click(function(){

$("p").append(" Ika");

     });

  });

  </script>



</body>

</html>

Di bawah ini adalah outputnya, yakni keadaan sebelum button di klik.

elemen append pada jquery

Dan berikut adalah output, ketika button sudah di klik.

fungsi method append pada jquery


Fungsi Method Prepend Pada JQuery

Method prepend() digunakan untuk menambah elemen baru, namun elemen baru ini diletakkan pada posisi sebelum elemen yang menjadi elemen acuannya, dan di letakkan sebaris dengan elemen acuan.

XHTML

<!DOCTYPE html>

<html>

<head>

  <script src="jquery-3.3.1.min.js"></script>

</head>

<body>

  <p>Tunggal Ika</p>

  <button>prepend()</button>



  <script>

  $(function(){

     $("button").click(function(){

$("p").prepend("Bhineka ");

      });

  });

  </script>

</body>

</html>

Dan di bawah ini adalah hasilnya, yakni kondisi ketika button belum di klik.

fungsi method prepend pada jquery

Dan berikut adalah hasil ketika button di klik.

method pada jquery


Fungsi Method After Pada JQuery

Method after() digunakan untuk menambah elemen baru, dimana elemen baru ini ditambahkan pada posisi setelah elemen yang menjadi elemen acuan.

XHTML

<!DOCTYPE html>

<html>

<head>

   <script src="jquery-3.3.1.min.js"></script>

</head>

<body>

   <p>Element</p>

   <br>

   <button>after()</button>



   <script>

   $(function(){

       $("button").click(function(){

    $("p").after("<b>After</b>");

});

   });

   </script>

</body>

</html>

Dan di bawah ini adalah hasilnya, ketika button after() belum di klik.

fungsi method after pada jquery

Dan apabila button after() sudah di klik, maka jquery akan menambah elemen baru pada baris baru.

method after pada jquery


Method Before() Pada JQuery

Method before() digunakan untuk menambahkan elemen baru, dan elemen baru ini akan ditempatkan pada posisi sebelum elemen yang menjadi elemen acuan.

XHTML

<!DOCTYPE html>

<html>

<head>

<script src="jquery-3.3.1.min.js"></script>

</head>

<body>

  <p>Element</p>

  <button>before()</button>



  <script>

  $(function(){

      $("button").click(function(){

$("p").before("<b>Before</b>");

      });

  });

  </script>

</body>

</html>

Dan di bawah ini adalah hasilnya, yakni ketika tombol button belum di klik.

fungsi method before pada jquery

Sedangkan gambar di bawah ini adalah output ketika tombol button sudah di kli.

apa itu method before pada jquery


Demikian tutorial dari Menambahkan Elemen HTML Dengan JQuery.

Keywords: elemen html jquery, tutorial html jquery

Share: