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

Pasti sobat bingung dengan penjelasan singkat saya diatas? Oke akan saya jelaskan satu per satu dengan sisipkan masing - masing contoh agar lebih mudah dipahami. Untuk contoh penggunaan fungsi after,before,prepend, dan append akan saya jelaskan pada tutorial dibawah ini akan saya gabungkan pada satu contoh agar lebih mudah dipahami dan dipelajari dan rasakan apa saja perbedaan dari masing - masing fungsi 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(){
            $('.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")
    });

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.

Untuk lebih jelasnya tentang penggunaan JQuery add element. Perhatikan contoh berikut

See the Pen pRXgRM by Yogi Prasetyawan (@bozzgok22) on CodePen.

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