JQuery Part 9 : Menambah Element Dengan JQuery
Belajar JQuery Menambah Element Dengan JQuery
Pada pembahasan kali ini kita akan membahas bagaimana menambah element dengan JQuery baik itu menambah element setelah ada element sebeulmnya, atau sebelum element tersebut atau yang lainya. Adapun beberapa fungsi yang berguna untuk menambahkan element dengan JQuery'
- after()Merupakan fungsi JQuery untuk menambahkan element html sesudah element yang dipilih
- before()Merupakan fungsi JQuery untuk menambahkan element html sebelum element yang dipilih
- prepend()Merupakan fungsi JQuery untuk menambahkan element html pada sisi dalam element yang dipilih tetapi diawal isi element tersebut
- append()Merupakan fungsi JQuery untuk menambahkan element html pada sisi dalam element yang dipilih tetapi diakhir isi element tersebut
index.html
<!DOCTYPE html>
<html>
<head>
<title>Belajar JQuery Part 9 : Menambah Element Dengan JQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Add Function JQuery<br>
<a href="http://www.script-kiddies.org">Script Kiddies</a></h1>
<div class="kotak">
<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>
<script type="text/javascript">
$(document).ready(function(){
$('.after').click(function(){
$('.kotak').after("<h4>Contoh After")
});
$('.before').click(function(){
$('.kotak').before("<h4>Contoh Before")
});
$('.append').click(function(){
$('.kotak').append("<h4>Contoh Append")
});
$('.prepend').click(function(){
$('.kotak').prepend("<h4>Contoh Prepend")
});
});
</script>
</html>
style.css
body{
font-family: raleway;
}
h1{
text-align: center;
}
.kotak{
width: 300px;
height: auto;
background: crimson;
padding: 30px;
color: #fff;
margin-bottom: 15px;
}
button{
color: crimson;
background: transparent;
border: 1px solid crimson;
padding: 10px
border-radius: 5px;
}
button:hover{
color: white;
background: crimson;
border: 1px solid crimson
}
Dapat kita perhatikan pada contoh diatas saya membuat 4 tombol yang saya berikan tanda tetst after,before,append, dan prepend. Tujuan dari tombol yang saya buat diatas adalah untuk memberikan tanda masing - masing fungsi dari tombol tersebut, tapi tujuanya sama yaitu untuk menambah element
$('.after').click(function(){Jika tombol after diklik maka akan muncul element " <h4>Contoh After</h4> " yang timbahakan sesudah element kotak seperti pada gambar hasil eksekusi di atas. Dan jika yang diklik 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 muncul 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 tampilkan di dalam kotak tapi pada posisi akhir dari semua isi pada element kotak.
$('.kotak').after("<h4>Contoh After")
});
$('.before').click(function(){
$('.kotak').before("<h4>Contoh Before")
});
$('.append').click(function(){
$('.kotak').append("<h4>Contoh Append")
});
$('.prepend').click(function(){
$('.kotak').prepend("<h4>Contoh Prepend")
});
Untuk lebih jelasnya tentang penggunaan JQuery add element. Perhatikan contoh berikut
KESIMPULAN
Bagaimana ? Susah atau makin pusing :v ? Jadi disini ada 4 fungsi JQuery untuk menambahkan element yaitu after,before,append,prepend seperti yang sudah saya jelaskan pada contoh diatas. Oke sampai sini saja Sekian Terima Kasih
Tidak ada komentar :
Posting Komentar