You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
2.7 KiB
79 lines
2.7 KiB
<!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>
|