document.createElement(), textContent, appendChild() | Tworzymy i dodajemy zadania jako nowe węzły DOM

Ok, więc wiemy już, jak uzyskać dostęp do elementu/ węzła DOM. Spróbujmy teraz stworzyć i dodać zadania do naszej listy z poziomu kodu JavaScript w konsoli. Będzie nam to potrzebne w przyszłości, by po pobraniu zadań z localStorage za pomocą JavaScript, dodać je w postaci kodu HMTL do listy.

Usuńmy najpierw ręcznie wszystkie elementy <li> z naszego kodu HTML, zapiszmy plik i odświeżmy przeglądarkę. Twoja lista w przeglądarce powinna teraz być pusta, a kod HTML powinien wyglądać tak:

<h1>Twoje zadania</h1>

<hr>

<button>dodaj zadanie</button>

<ul id="tasks-list">

</ul>

<button>wyczyść listę</button>

Teraz przejdźmy do konsoli i stwórzmy nowy element listy <li> za pomocą metody document.createElement(), przypisując go do zmiennej li (list element):

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

console.log(li);

Za pomocą document.createElement() możemy utworzyć dowolny znacznik HTML, podając jego nazwę ujętą w cudzysłów w nawiasach metody: document.createElement("li"). Gdybyśmy chcieli stworzyć nowy nagłówek h1, to zrobilibyśmy to tak: document.createElement("h1").

Konsola wyświetliła nam nowy element listy, który na razie "wisi w powietrzu" i nie zawiera żadnej treści pomiędzy <li></li>. Dodajmy więc teraz treść naszego zadania za pomocą właściwości textContent, która reprezentuje treść węzła DOM:

li.textContent = "zrobić kawę";

console.log(li);

Widzimy teraz w konsoli, że pomiędzy tagami <li></li> pojawiła się treść naszego zadania: <li>zrobić kawę</li>. Jak widzisz, JavaScript jest potężnym językiem programowania - ma moc tworzenia nowych elementów HTML (i nie tylko!).

Ok, mamy już ukształtowane zadanie w postaci elementu DOM, zawierającego treść, tyle że nadal nie widzimy go w przeglądarce... Żeby tak się stało, musimy teraz ten "lewitujący" w pamięci konsoli element dodać do istniejącego już drzewa DOM, a dokładniej do listy <ul id="tasks-list">. Możemy to zrobić za pomocą metody appendChild():

// najpierw uzyskujemy dostęp do listy, tak jak wcześniej:
const tasksList = document.getElementById("tasks-list");

// dodajemy wcześniej utworzony element li z przypisaną treścią do listy:
tasksList.appendChild(li); // jeśli wcześniej przeładowałeś/aś stronę, to musisz stworzyć ten element jeszcze raz

console.log(tasksList);

Udało się! Utworzyliśmy nowy element, przypisaliśmy do niego wartość, a potem dodaliśmy do istniejącego drzewa DOM za pomocą JavaScript! Zarówno w konsoli, jak i w przeglądarce widzimy, że do listy <ul id="tasks-list"> zostało dodane zadanie <li>zrobić kawę</li>.

Teraz, gdybyśmy chcieli dodać kolejne zadania, musielibyśmy za każdym razem napisać dużo kodu... Ale na szczęście znamy trochę JavaScript i wiemy, że powtarzalne zadania najlepiej jest przechowywać w postaci reużywalnych funkcji, co zrobimy za chwilę, a raczej zmodyfikujemy istniejącą już funkcję addTask().