manipulace DOM

4 years ago · d56df1d8b7
2 changed files with 83 additions and 0 deletions
--- a/image.jpg
+++ b/image.jpg
--- a/index.html
+++ b/index.html
@ -0,0 +1,83 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Opakování JS - DOM</title>
 </head>
 <body>
    <h1>Opakování manipulace DOM</h1>
    <ul id="jmena"></ul>
    <div id="kontejner"></div>
    <div id="kontejner2"></div>
    <div id="kontejner3"></div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
        // vytvořit element obrázek a vložit jej do dokumentu
        // 1. objektový způsob pomocí JS
        let kon = document.querySelector("#kontejner");
        let img = document.createElement("img");
        img.setAttribute("src", "image.jpg");
        kon.appendChild(img);
        // 2. textový způsob
        let kon2 = document.querySelector("#kontejner2");
        kon2.innerHTML += '<img src="image.jpg">';
        // kon2.innerHTML = '<img src="image.jpg">';  // nahradí stávající obsah kon2
        // 3. jquery způsob
        $('#kontejner3').append('<img src="image.jpg">');
        //$('#kontejner3').html('<img src="image.jpg">'); // nahradí stávající obsah kon3
        // vytvořit odrážkový seznam z pole a vložit do dokumentu
        // let pole = ["Pankrác", "Servác", "Bonifác", "Žofie"];
        // let jmena = document.querySelector("#jmena");
        // for (let index = 0; index < pole.length; index++) {
        //     const element = pole[index];
        //     jmena.innerHTML += '<li>' + element + '</li>';
        // }
        // přidat tlačítko pro možnost odstranění položky ze seznamu
        let pole = ["Pankrác", "Servác", "Bonifác", "Žofie"];
        let jmena = document.querySelector("#jmena");
        for (let index = 0; index < pole.length; index++) {
            const element = pole[index];
            // let li = document.createElement('li');
            // li.setAttribute('id', 'jmeno' + index);
            // li.innerText = element;
            // chybí button
            // jmena.appendChild(li);
            jmena.innerHTML += '<li id="jmeno' + index + '">' + element + ' <button data-id="#jmeno' + index + '">X</button></li>';
        }
        let tlacitka = document.querySelectorAll('#jmena button');
        for (let index = 0; index < tlacitka.length; index++) {
            const element = tlacitka[index];
            element.addEventListener("click", function() {
                let li = document.querySelector(this.dataset.id);
                li.remove();
                // alternativní řešení, které funguje pro tento případ
                //this.parentNode.remove();
            });
        }
    </script>
 </body>
 </html>