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.
72 lines
2.0 KiB
72 lines
2.0 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Document</title>
|
|
</head>
|
|
<body>
|
|
<h1>opakování js</h1>
|
|
<div class="obrazek"></div>
|
|
<div class="obrazek2"></div>
|
|
<ul class="jmena"></ul>
|
|
|
|
<script>
|
|
//vytvoření obrázku + vložení do dokumentu
|
|
/* let obr = document.querySelector(".obrazek");
|
|
let img = document.createElement("img");
|
|
img.setAttribute("src", "image.jpg")
|
|
obr.appendChild(img); */
|
|
|
|
//2. způsob
|
|
let obr2 = document.querySelector(".obrazek2");
|
|
obr2.innerHTML += '<img src="image.jpg">';
|
|
|
|
//3. jquery
|
|
//$("kontejner3").append('<img src="image.jpg">');
|
|
|
|
|
|
//odrážkový sezna, z pole a vložení do dokumentu
|
|
/* let pole = ["Petr", "Pet", "Pe", "P",];
|
|
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 = ["Petr", "Pet", "Pe", "P",];
|
|
let jmena = document.querySelector(".jmena");
|
|
for (let index = 0; index < pole.length; index++) {
|
|
const element = pole[index];
|
|
|
|
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();
|
|
});
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|