Tutorial Belajar jQuery Part 9: Cara Menambah Elemen HTML dengan jQuery

Dalam tutorial belajar jQuery Duniailkom kali ini saya akan membahas cara menambah elemen HTML baru dengan jQuery. Untuk ini kita akan mempelajari 4 method jQuery: append(), prepend(), after() dan before().


Cara Penggunaan Method append() dan prepend() jQuery

Method append() dan prepend() bisa digunakan untuk menambah elemen HTML baru ke dalam kode HTML yang sudah ada. Method append() akan menambahkan elemen baru ke bagian akhir, sedangkan prepend() akan menambahkan elemen HTML baru ke bagian awal.

Yang perlu dicatat, kedua fungsi ini menambahkan element baru ke dalam selector yang dicari. Berikut contohnya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Duniailkom</title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
 
     $("#tombol_app").click(function() {
       $("#box").append("<p>jQuery is Amazing...</p>");
     })
 
     $("#tombol_pre").click(function() {
       $("#box").prepend("<p>Learning jQuery...</p>");
     })
 
   });
   </script>
</head>
<body>
<div id="box">
   <h2>Sedang belajar jQuery di Duniailkom...</h2>
</div>
<button id="tombol_app">Append</button>
<button id="tombol_pre">Prepend</button>
</body>
</html>

Pada kode program diatas, saya memiliki sebuah tag <div> dengan id=”box”. Di dalamnya terdapat sebuah tag <h2>.

Ketika tombol “Append” di klik, akan dijalan perintah berikut:

$("#box").append("<p>jQuery is Amazing...</p>");

Ini maksudnya, tambahkan kode “<p>jQuery is Amazing…</p>” ke bagian akhir tag <div id=”box”>. Hasilnya adalah sebagai berikut:

<div id="box">
 <h2>Sedang belajar jQuery di Duniailkom...</h2>
 <p>jQuery is Amazing...</p>
</div>

Dapat dilihat bahwa, element <p> akan ditambahkan ke bagian akhir di dalam tag <div id=”box”>. Hasil ini akan mudah dilihat jika anda mengaktifkan Web Developer Tools dari web browser, seperti gambar berikut:

Contoh Cara Menambah Elemen HTML dengan jQuery

Begitu juga ketika tombol “Prepend” di klik, perintah:

$("#box").prepend("<p>Learning jQuery...</p>");

Akan menambah sebuah paragraf baru ke dalam tag <div id=”box”>, pada posisi paling awal. Berikut hasil yang di dapat:

<div id="box">
  <p>Learning jQuery...</p>
  <h2>Sedang belajar jQuery di Duniailkom...</h2>
</div>

Silahkan anda coba sendiri:

See the Pen Cara Menambah Elemen HTML dengan jQuery, append() dan prepend() by duniailkom (@duniailkom) on CodePen.10206


Cara Penggunaan Method after() dan before() jQuery

Method after() dan before() jQuery sebenarnya sangat mirip dengan append() dan prepend(). Bedanya terletak di posisi di mana element baru akan ditambahkan. Method after() dan before() akan menambahkan elemen baru di luar jQuery Selector.

Agar lebih jelas, mari jalankan kode yang sama dengan sebelumnya, dan hanya merubah method append() menjadi after() dan prepend() menjadi before():

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Duniailkom</title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
 
     $("#tombol_app").click(function() {
       $("#box").after("<p>jQuery is Amazing...</p>");
     })
 
     $("#tombol_pre").click(function() {
       $("#box").before("<p>Learning jQuery...</p>");
     })
 
   });
   </script>
</head>
<body>
<div id="box">
   <h2>Sedang belajar jQuery di Duniailkom...</h2>
</div>
<button id="tombol_app">After</button>
<button id="tombol_pre">Before</button>
</body>
</html>

See the Pen Cara Menambah Elemen HTML dengan jQuery, after() dan before() by duniailkom (@duniailkom) on CodePen.10206

Jika anda menjalankan kode diatas, hasilnya tampak sama persis seperti kode program kita sebelumnya. Tapi method after() dan before() ini akan menambahkan elemen baru di sisi luar.

Ketika tombol “After” di klik, perintah berikut akan dijalankan:

$("#box").after("<p>jQuery is Amazing...</p>");

Hasilnya adalah sebagai berikut:

<div id="box">
  <h2>Sedang belajar jQuery di Duniailkom...</h2>
</div>
<p>jQuery is Amazing...</p>

Perhatikan beda antara method append() dengan after(). Perintah after() akan menampatkan tag <p> disisi luar, yakni setelah tag <div id=”box”>, bukan di dalam tag <div id=”box”> sebagaimana method append().

Begitu juga dengan method before(), hasilnya adalah sebagai berikut:

<p>Learning jQuery...</p>
<div id="box">
  <h2>Sedang belajar jQuery di Duniailkom...</h2>
</div>

Method before() akan menampatkan tag <p> sebelum dan diluar <div id=”box”>.

Dalam tutorial belajar jQuery kali ini kita telah membahas cara menambahkan element baru ke halaman HTML. Apabila konsep ini digabung dengan teknik mengambil nilai dari form HTML (yang kita pelajari dalam beberapa tutorial sebelumnya), kita bisa membuat halaman HTML yang dinamis. Inilah yang akan saya bahas selanjutnya: Cara Menambah Isi Tabel HTML secara dinamis dengan jQuery.


Tutorial Terkait:

3 Comments

  1. Rusman
    28 Mar 16
    • Andre
      28 Mar 16
  2. Rusman
    28 Mar 16

Add Comment