Cara Menambahkan Elemen HTML Pada jQuery

Halo semuanya sekarang kita akan membahas tentang bagaimana cara menambahkan elemen baru pada elemen HTML yang kita buat tentu saja kita gunakan fungsi fungsi bawaan jQuery. Oke langkah pertama disini saya sudah menyediakan beberapa elemen-elemen HTML dan terdapat dua buah tombol sebagai berikut

Dan saya juga sudah membuat sebuah event click untuk tombol satu dimana ketika tombol satu ini di klik maka kita akan melakukan sesuatu yakni menambahkan elemen seperti berikut

Contoh sederhananya kita akan menambahkan pada elemen <li> tersebut yakni kita akan menggunakan metode append. Tentu yang pertama kita harus memilih elemennya sebagai berikut

Jika ditampilkan dan diklik tombol add maka elemen <li> akan bertambah. Yang kedua teman teman bisa gunakan metode prepend dimana metode tersebut menambahkan elemen baru sebelum elemen yang kita pilih sedangkan append sebaliknya. Tapi disini saya ingin menghapus elemen yang sudah kita tambahkan tadi contohnya seperti berikut

Akan tampil elemen yang terakhir dengan metode :last dengan saya mengklik tombol remove.

Lanjut lagi terdapat fungsi jquery yang hampir mirip dengan kedua fungsi tersebut yakni after dan before. Bedanya jika metode append dan prepend tadi akan menambahkan elemen tersebut itu didalam atau dibagian elemen itu sendiri tapi pada after dan before memasukkan diluar elemen tersebut contohnya seperti ini

Dan jika klik tombol after maka akan tampil elemen baru tetapi bukan bagian dari elemen <ol> berbeda ketika kita gunakan metode after. Kita juga bisa menambahkan tag baru pada metode before

Oke itu dia beberapa contoh dasar dalam menambahkan elemen baik itu sebelum dan sesudahnya.

Semoga bermanfaat