Rozgrzewka: atrybuty z poprzedniej lekcji

1. Co robi setAttribute("src", "picture2.jpg") wywołane na elemencie <img>?
2. Jak odczytacie wartość atrybutu src metodą getAttribute?
3. Jak zmienicie klasę elementu poleceniem setAttribute?

createElement: nowy element, jeszcze poza drzewem

Do tej pory pracowaliście na elementach, które już były na stronie. document.createElement("li") tworzy zupełnie nowy element - jak wyjęcie nowego klocka z pudełka. Macie go w rękach, ale nie jest jeszcze wpięty w żadną konstrukcję: nie widać go na stronie, dopóki go gdzieś nie dołączycie.

const newItem = document.createElement("li");

appendChild: dołączamy węzeł do rodzica

Sam createElement nie wystarczy - element trzeba jeszcze dołączyć do drzewa. list.appendChild(newItem) dołącza newItem jako ostatnie dziecko elementu list, tak jak dołączenie nowego wagonu na koniec pociągu. Dopiero po tym element pojawia się na stronie.

list.appendChild(newItem);

textContent: co ma być widoczne w środku

Nowy element z createElement jest pusty w środku - to sam znacznik, bez treści. newItem.textContent = "Kupić mleko" wpisuje tekst do wnętrza elementu. Ten sam zapis znacie już z lekcji o zmianie treści (temat 3/6) - tam zmieniał tekst istniejącego elementu, tu ustawia tekst elementu, który dopiero co powstał.

const newItem = document.createElement("li");
newItem.textContent = "Kupić mleko";

Kolejność ma znaczenie tylko o tyle, że newItem musi już istnieć - samą kolejność textContent i appendChild możecie odwrócić, efekt końcowy jest taki sam.

remove(): odcinamy węzeł z drzewa

Metoda remove() wywołana na elemencie odcina go z drzewa DOM - jak odcięcie gałęzi z drzewa. Element znika ze strony. list.lastElementChild to ostatnie dziecko elementu list - w ten sposób znajdziecie ostatni element listy bez pamiętania jego id.

list.lastElementChild.remove();

Kod razem: dodajemy i usuwamy zadanie z listy

page.html:

<ul id="tasks">
  <li>Pierwsze zadanie</li>
</ul>
<button type="button" onclick="addItem()">Dodaj zadanie</button>
<button type="button" onclick="removeLast()">Usuń ostatnie</button>

script.js:

function addItem() {
  const list = document.getElementById("tasks");
  const newItem = document.createElement("li");
  newItem.textContent = "Nowe zadanie";
  list.appendChild(newItem);
}

function removeLast() {
  const list = document.getElementById("tasks");
  list.lastElementChild.remove();
}

Tak pytają na egzaminie o DOM

W bankach zadań CKE nie ma na razie pytania wprost o createElement, appendChild ani remove(). Pisemne pytania o DOM (obiektowy model dokumentu) dotyczą częściej wyszukiwania elementu i zmiany jego treści - getElementById i innerHTML (tematy 2/6 i 3/6, lekcje 21 i 22).

Tworzenie i usuwanie elementów wraca za to w części praktycznej egzaminu - i w projektach na kolejnych lekcjach (gra, blog), gdzie strona sama dokłada elementy na podstawie danych.

Ćwiczenie: dodajemy i usuwamy zadanie z listy

1. Otwórz page.html z poprzednich lekcji. Dodaj <ul id="tasks"> z jednym elementem <li> w środku i dwa przyciski: „Dodaj zadanie” i „Usuń ostatnie”.
2. W script.js napisz funkcję addItem(): pobierz listę po id, utwórz nowy <li> przez createElement, ustaw mu tekst przez textContent i dołącz do listy przez appendChild.
3. Napisz funkcję removeLast(): pobierz listę po id i wywołaj remove() na jej ostatnim dziecku (lastElementChild).
4. Sprawdź w przeglądarce: otwórz page.html, kliknij kilka razy „Dodaj zadanie”, potem „Usuń ostatnie” - lista ma rosnąć i się skracać.
5. Dla chętnych: zapisz zmiany w swoim repozytorium - commit „Dodaje tworzenie i usuwanie elementu listy”.

<!-- page.html -->
<ul id="tasks">
  <li>Pierwsze zadanie</li>
</ul>
<button type="button" onclick="addItem()">Dodaj zadanie</button>
<button type="button" onclick="removeLast()">Usuń ostatnie</button>

// script.js
function addItem() {
  const list = document.getElementById("tasks");
  const newItem = document.createElement("li");
  newItem.textContent = "Nowe zadanie";
  list.appendChild(newItem);
}

function removeLast() {
  const list = document.getElementById("tasks");
  list.lastElementChild.remove();
}

A jak to wygląda w produkcji?

Ciekawostka z MDN: document.createDocumentFragment() tworzy pojemnik w pamięci, do którego można dołączyć wiele nowych elementów, zanim jakikolwiek z nich trafi na stronę. Gdy taki fragment dołączycie do dokumentu przez appendChild, do drzewa DOM trafiają tylko jego dzieci - sam fragment zostaje pusty.