#JQuery - #JQuery Dasar

Belajar JQuery Part 9 : Menambah Element Dengan JQuery

Belajar JQuery Menambah Element Dengan JQuery

JQuery memiliki fungsi untuk menambahkan element baru pada element HTML, bisa itu menambahkan element sebelum element, sesudah element, sebelum element yang ada di dalam nya atau sesudah element yang ada di dalamnya. adapun beberapa fungsi jquery yang bisa di gunakan untuk menambah element dengan jquery adalah:

after()
merupakan fungsi jquery untuk menambahkan element html pada sesudah element yang di pilih.
before()
merupakan fungsi jquery untuk menambahkan element html pada sebelum element yang di pilih.
prepend()
merupakan fungsi jquery untuk menambahkan element html pada sisi dalam element yang di pilih tapi di awal isi element tersebut.
append()
merupakan fungsi jquery untuk menambahkan element html pada sisi dalam element yang di pilih tapi di akhir isi dari element tersebut.

Pasti anda bingung dengan penjelasan pengertian dari fungsi-fungsi jquery di atas yang di gunakan untuk menambahkan element. alangkah lebih baiknya akan di jelaskan satu persatu dengan di sisipkan masing-masing contoh agar lebih mudah di pahami. untuk contoh dari penggunaan fungsi after, before, append dan prepend akan di gabungkan pada satu contoh agar lebih mudah di pelajari dan di rasakan apa-apasaja perbedaan dari masing-masing fungsi jquery tersebut.

index.html

<!DOCTYPE html>

<html>

<head>

<title>Tutorial belajar JQuery Part 9 : Menambah Element dengan JQuery</title>

</head>

<body>

<h1>Add Function JQuery | www.malasngoding.com</h1>

<span>ISI KOTAK</span>

</div>

<button class="after">Tes after</button>

<button class="before">Tes before</button>

<button class="append">Tes append</button>

<button class="prepend">Tes prepend</button>

</body>

$(document).ready(function(){

$('.after').click(function(){

$('.kotak').after("<h4>contoh after</h4>")

});

$('.before').click(function(){

$('.kotak').before("<h4>contoh before</h4>")

});

$('.append').click(function(){

$('.kotak').append("<h4>contoh append</h4>")

});

$('.prepend').click(function(){

$('.kotak').prepend("<h4>contoh prepend</h4>")

});

</script>

</html>

style.css

body{

font-family: sans-serif;

}

h1{

text-align: center;

}

.kotak{

width: 300px;

height: auto;

background: orange;

padding: 30px;

color: #fff;

margin-bottom: 20px;

}

.kotak span{

background: red;

padding: 10px;

}

button{

color: #fff;

background: #232323;

border: none;

padding: 10px;

}

menambah element dengan jquery

dapat di perhatikan pada contoh di atas. terdapat empat buah tombol yang sudah kita beri tanda masing-masing dengan nama after, before, append dan prepend. tujuan dari masing-masing tombol yang saya buat sebagai contoh ini adalah untuk menambahkan element yang dapat juga perhatikan pada syntax jquery berikut. Belajar JQuery Menambah Element Dengan Jquery

$('.after').click(function(){

$('.kotak').after("<h4>contoh after</h4>")

});

$('.before').click(function(){

$('.kotak').before("<h4>contoh before</h4>")

});

$('.append').click(function(){

$('.kotak').append("<h4>contoh append</h4>")

});

$('.prepend').click(function(){

$('.kotak').prepend("<h4>contoh prepend</h4>")

});

jika tombol after di klik maka element “<h4>contoh after</h4>” akan di tambahkann pada sesudah element kotak seperti pada gambar yang hasil eksekusi di atas. dan jika yang di klik tombol before maka element “<h4>contoh before</h4>” akan muncul pada sebelum element kotak. jika tombol append di klik maka element “<h4>contoh append</h4>” akan di munculkan di dalam kotak tapi pada posisi awal dari semua isi pada element kotak. jika tombol prepend di klik maka element “<h4>contoh prepend</h4>” akan di munculkan atau di tambahkan di dalam element class kotak tetapi pada terletak pada akhir semua element yang terdapat di dalam element kotak.

Belajar JQuery Menambah Element Dengan JQuery

sesuai dengan masing-masing contoh lokasi seperti pada gambar di atas. dan untuk lebih jelasnya lagi dilahkan pelajari pada contoh berikut ini.

See the Pen XXpBxR by Malas Ngoding (@malasngoding) on CodePen.0

terima kasih sudah membaca tutorial Belajar JQuery Menambah Element Dengan Jquery selanjutnya pada tutorial belajar jquery selanjutnya akan di jelaskan tentang menambahkan css dengann JQuery pada Belajar JQuery Part 10.

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.