Promo Member Baru 40%! Program Full Stack Membership! Hanya 3 Hari! Klaim Promo

cara tambah tombol dari jquery

Ditanyakan pada tanggal 11 February 2020 oleh Ario

bagaimana kode untuk menambah atau meletakkan element tombol pada li kota depok, jika saya punya kode seperti ini ? https://ibb.co/ryrGq6K

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=width-device, 
        initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Ini Belajar Event Handler jQuery</title>        
    </head>
    <body>
        <h1>Kamu ingin berwisata bersama orang tersayang?</h1>
        <p>Silahkan Pilih Tujuannmu</p>
        <ul class="tujuan">
            <li>Bandung <button class="tombol">Kunjungi</button></li>
            <li>Surabaya <button class="tombol">Kunjungi</button></li>
            <li>Bekasi <button class="tombol">Kunjungi</button></li>
        </ul>
        <button class="tombol">Kunjungi</button>
        <script src="jquery-3.4.1.min.js"></script>
        <script>
            $(document).ready(function name(params) {
            var Depok=("<li>Depok</li>");
            $(".tujuan").append(Depok);
            $(".tombol").on("click", function () {
                alert("Kamu Yakin Pilih berwisata kesana?")
            })
            })
        </script>
    </body>
</html>

1 JAWABAN / 0 KOMENTAR

User avatar
Ahmad Oriza menjawab pada tanggal 11 February 2020

Untuk meng-append elemen baru tinggal masukan saja HTML nya ke sebuah string, lalu append dengan Jquery ke sebuah elemen. Karena tombol juga bisa kita embed jadinya seperti ini pak, sama saja :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=width-device, 
        initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Ini Belajar Event Handler jQuery</title>        
    </head>
    <body>
        <h1>Kamu ingin berwisata bersama orang tersayang?</h1>
        <p>Silahkan Pilih Tujuannmu</p>
        <ul class="tujuan">
            <li>Bandung <button class="tombol">Kunjungi</button></li>
            <li>Surabaya <button class="tombol">Kunjungi</button></li>
            <li>Bekasi <button class="tombol">Kunjungi</button></li>
        </ul>
        <button class="tombol">Kunjungi</button>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script>
            $(document).ready(function() {
            var Depok = `
                <li>Depok <button class="tombol">Kunjungi</button> </li> 
            `;

            $(".tujuan").append(Depok);
            $(".tombol").on("click", function () {
                alert("Kamu Yakin Pilih berwisata kesana?")
            })
            })
        </script>
    </body>
</html>