maturitahelp DOM

4 years ago · 3fd9eb2bf4
2 changed files with 79 additions and 0 deletions
--- a/image.jpeg
+++ b/image.jpeg
--- a/index.html
+++ b/index.html
@ -0,0 +1,79 @@
+<!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
+            
+            //jmena.appendChild(li);
+            jmena.innerHTML += '<li id="jmeno' + index + '">' + element + ' <button data-id="#jmeno' + index + '">X</button></li>';
+        }
+        //odebiraci tlacitko 
+        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();
+            });
+        }
+ 
+ 
+ 
+    </script>
+</body>
+</html>