Szkola

---

Copyright (c) kitxchi 2026

Document Object Model

1. Dodawanie i usuwanie

Dodaj element na początek Dodaj element na koniec

let licznik = 1; const lista = document.getElementById("lista"); const addBtn = document.getElementById("add"); const addFirstBtn = document.getElementById("addFirst"); function stworzElement() { const li = document.createElement("li"); li.textContent = "Element " + licznik++; // usuwanie po kliknięciu li.addEventListener("click", function () { li.remove(); }); return li; } // dodawanie na koniec addBtn.addEventListener("click", function () { lista.appendChild(stworzElement()); }); // dodawanie na początek addFirstBtn.addEventListener("click", function () { lista.prepend(stworzElement()); });

2. Prosty slider

Poprzedni Następny

const images = Array.from({ length: 10 }, () => { const randomId = Math.floor(Math.random() * 1000); return `https://picsum.photos/id/${randomId}/300/200`; }); let index = 0; const slide = document.getElementById("slide"); slide.src = images[index]; function next() { index++; if (index >= images.length) index = 0; slide.src = images[index]; } function prev() { index--; if (index < 0) index = images.length - 1; slide.src = images[index]; } setInterval(next, 3000);