waktu tersisa untuk klaim Potongan harga Rp 300.000 dalam program Membership. Klaim Promo!

cara tambah tombol dari jquery

Ditanyakan pada tanggal 11 February 2020 oleh Ario Edit  Hapus  Buka Kembali  Tandai 

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
Oriza Sahputra menjawab pada tanggal 11 February 2020 Jadikan Jawaban Terbaik  Edit  Hapus  Ubah ke Komentar 

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>