Tworzenie i usuwanie elementów

<input type="text" id="nowe" placeholder="Nowy produkt" value="mleko">
<button type="button" onclick="dodajProdukt()">Dodaj</button>
<ul id="lista">
  <li>chleb</li>
</ul>

function dodajProdukt() {
  const pole = document.getElementById('nowe');
  const nazwa = pole.value.trim();
  if (nazwa === '') return;                       // nie dodawaj pustych

  const pozycja = document.createElement('li');   // 1. utwórz
  pozycja.textContent = nazwa;                    // 2. ustaw
  document.getElementById('lista').appendChild(pozycja);   // 3. dołącz na koniec <ul>

  pole.value = '';                                // wyczyść pole po dodaniu
  pole.focus();
}

<div id="koszyk"><h3>Koszyk</h3></div>
<label>Nazwa: <input type="text" id="nazwa" value="plakat.png"></label>
<label>Kopie: <input type="number" id="kopie" value="2" min="1"></label>
<button type="button" id="dodaj">Dodaj do koszyka</button>

.pozycja { display: flex; gap: 12px; align-items: center; border-bottom: 1px solid #ddd; padding: 6px 0; }
.pozycja img { width: 48px; height: 48px; background: #f2d338; }
.pozycja p { margin: 0; }

document.getElementById('dodaj').addEventListener('click', () => {
  const nazwaPliku = document.getElementById('nazwa').value;
  const kopie = parseInt(document.getElementById('kopie').value);

  const pozycja = document.createElement('div');       // rodzic bloku
  pozycja.className = 'pozycja';

  const miniatura = document.createElement('img');
  miniatura.alt = nazwaPliku;                          // na egzaminie: miniatura.src = nazwaPliku
  const opis = document.createElement('p');
  opis.textContent = 'Liczba kopii: ' + kopie;
  const cena = document.createElement('p');
  cena.textContent = 'Cena: ' + (kopie * 1.5).toFixed(2) + ' zł';

  pozycja.append(miniatura, opis, cena);               // dzieci do bloku…
  document.getElementById('koszyk').appendChild(pozycja);   // …blok do koszyka
});

<div id="galeria"></div>
<p>Najedź na miniaturę – zobaczysz dymek z numerem.</p>

#galeria img.wzory { width: 44px; height: 44px; margin: 2px; border: 1px solid #999; }

// zastępnik plików 1.jpg…10.jpg (na egzaminie: obraz.src = i + '.jpg')
function zrodloObrazka(numer) {
  const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44">' +
    '<rect width="100%" height="100%" fill="hsl(' + numer * 36 + ',60%,55%)"/>' +
    '<text x="50%" y="55%" font-size="18" fill="white" text-anchor="middle" dominant-baseline="middle">' + numer + '</text></svg>';
  return 'data:image/svg+xml;utf8,' + encodeURIComponent(svg);
}

const galeria = document.getElementById('galeria');
for (let numer = 1; numer <= 10; numer++) {
  const obraz = document.createElement('img');     // NOWY element w każdym obiegu
  obraz.src = zrodloObrazka(numer);                // na egzaminie: numer + '.jpg'
  obraz.alt = 'wzór ' + numer;
  obraz.title = 'Wzór nr ' + numer;                // dymek z numerem
  obraz.className = 'wzory';
  galeria.appendChild(obraz);
}

<ul id="zadania">
  <li>Powtórzyć DOM <button type="button" onclick="oznaczWykonane(this)">Wykonane</button></li>
  <li>Zrobić zadanie z pętlą <button type="button" onclick="oznaczWykonane(this)">Wykonane</button></li>
</ul>
<input type="text" id="noweZadanie" placeholder="Dodaj zadanie…" value="Napisać chat">
<button type="button" id="dodaj">Dodaj</button>

li { margin: 4px 0; }
li.wykonane { text-decoration: line-through; color: gray; }

// ta sama funkcja dla istniejących i nowych przycisków
// przycisk = kliknięty przycisk (this z atrybutu lub event.target)
function oznaczWykonane(przycisk) {
  const pozycja = przycisk.parentElement;        // <li>, w którym siedzi przycisk
  pozycja.classList.add('wykonane');             // lub: pozycja.style.textDecoration = 'line-through'
  przycisk.disabled = true;
}

document.getElementById('dodaj').addEventListener('click', () => {
  const pole = document.getElementById('noweZadanie');
  if (pole.value.trim() === '') return;

  const pozycja = document.createElement('li');
  pozycja.textContent = pole.value + ' ';        // tekst zadania

  const przycisk = document.createElement('button');
  przycisk.type = 'button';
  przycisk.textContent = 'Wykonane';
  przycisk.addEventListener('click', () => oznaczWykonane(przycisk));   // podpięcie do tej samej funkcji

  pozycja.appendChild(przycisk);
  document.getElementById('zadania').appendChild(pozycja);
  pole.value = '';
});

<ul id="lista">
  <li>Ala <button type="button" class="usun">×</button></li>
  <li>Bartek <button type="button" class="usun">×</button></li>
  <li>Celina <button type="button" class="usun">×</button></li>
</ul>
<button type="button" id="cofnij" disabled>Cofnij ostatnie usunięcie</button>
<button type="button" id="wyczysc">Wyczyść listę</button>

const lista = document.getElementById('lista');
const cofnij = document.getElementById('cofnij');
let ostatnioUsuniety = null;

for (const przycisk of document.querySelectorAll('.usun')) {
  przycisk.addEventListener('click', () => {
    ostatnioUsuniety = przycisk.parentElement;    // <li>
    ostatnioUsuniety.remove();                    // lub: lista.removeChild(ostatnioUsuniety)
    cofnij.disabled = false;
  });
}

cofnij.addEventListener('click', () => {
  if (ostatnioUsuniety) {
    lista.appendChild(ostatnioUsuniety);          // element wraca na koniec listy
    ostatnioUsuniety = null;
    cofnij.disabled = true;
  }
});

document.getElementById('wyczysc').addEventListener('click', () => {
  lista.innerHTML = '';                           // wszystkie dzieci znikają
});

<div id="okno"></div>
<input type="text" id="tekst" placeholder="Napisz wiadomość…" value="Cześć, jak tam projekt?">
<button type="button" id="wyslij">Wyślij</button>
<button type="button" id="losuj">Losowa odpowiedź</button>

#okno { height: 150px; overflow-y: auto; border: 1px solid #ccc; padding: 8px; }
.wiadomosc { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.wiadomosc .awatar { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.ja .awatar { background: SteelBlue; } .bot .awatar { background: Olive; }
.wiadomosc p { margin: 0; background: #f3f3f3; padding: 4px 8px; border-radius: 8px; }

const odpowiedzi = ['Idzie dobrze!', 'Jeszcze nie zaczęłam.', 'Skończę do piątku.', 'Potrzebuję pomocy z CSS.',
  'Działa, ale nie wiem dlaczego.', 'Zrobione na 80 %.', 'Czekam na dane od Krzyśka.', 'Zapytaj jutro.', 'A ty?'];
const okno = document.getElementById('okno');

function dodajWiadomosc(tekst, klasaAutora) {
  const blok = document.createElement('div');
  blok.className = 'wiadomosc ' + klasaAutora;      // dwie klasy: "wiadomosc ja" / "wiadomosc bot"

  const awatar = document.createElement('span');    // na egzaminie: <img src="Jolka.jpg">
  awatar.className = 'awatar';
  const akapit = document.createElement('p');
  akapit.textContent = tekst;

  blok.append(awatar, akapit);
  okno.appendChild(blok);
  blok.scrollIntoView({ behavior: 'smooth' });      // przewiń do najnowszej wiadomości
}

document.getElementById('wyslij').addEventListener('click', () => {
  const pole = document.getElementById('tekst');
  if (pole.value.trim() === '') return;
  dodajWiadomosc(pole.value, 'ja');
  pole.value = '';
});

document.getElementById('losuj').addEventListener('click', () => {
  const indeks = Math.floor(Math.random() * odpowiedzi.length);   // 0–8
  dodajWiadomosc(odpowiedzi[indeks], 'bot');
});