innerHTML | Czyścimy listę zadań za jednym zamachem za pomocą innerHTML

Zadanie, które dodaliśmy w poprzedniej lekcji wyświetla się bezpośrednio w przeglądarce jako węzeł DOM, czyli część prawdziwej strony internetowej, a nie w konsoli, tak jak wcześniej. Jesteśmy coraz bliżej celu.

Spróbujmy teraz dla odmiany wyczyścić naszą listę za jednym zamachem - przyda nam się to w przyszłości. Możemy to zrobić (jak zwykle) na kilka sposobów, a najprostszym z nich jest skorzystanie z właściwości innerHTML, czyli dosłownie wewnętrzny HTML.

Dzięki tej właściwości dowolnego węzła DOM, możemy przypisać dowolny kod HTML do danego elementu. Nie zagłębiajmy się w szczegóły, tylko przypiszmy do naszej listy... pusty ciąg znaków! W ten sposób usuniemy cały HTML, który znajduje się wewnątrz <ul>, czyli elementy listy <li>, zawierające nasze zadania:

// na wszelki wypadek zadeklarujmy listę jeszcze raz:
const tasksList = document.getElementById("tasks-list");

// czyścimy listę:
tasksList.innerHTML = "";

console.log(tasksList); // => zadania zniknęły!

Zaszalejmy i przypiszmy ten kod do funkcji deleteAllTasks:

function deleteAllTasks() {
  // na wszelki wypadek zadeklarujmy listę jeszcze raz:
  const tasksList = document.getElementById("tasks-list");

  // czyścimy listę:
  tasksList.innerHTML = "";

  console.log(tasksList); // => zadania zniknęły!
}

Teraz wiemy, jak dodawać zadania jako węzły drzewa DOM, czyli przekształcać je w kod HTML naszej strony internetowej w przeglądarce, a potem je usuwać za jednym zamachem. Pobaw się trochę tym kodem znowu, dodaj kilka zadań, potem je usuń.

Możesz też odświeżyć stronę i spróbować samodzielnie od nowa uzyskać dostęp do naszej listy za pomocą document.getElementById() i dodać tam zadania za pomocą document.createElement(), textContent i appendChild().

Wszystko jest fajnie, ale jeśli odświeżymy stronę, to zniknie zarówno kod, który stworzyliśmy, jak również i nasze zadania...

Dlatego w kolejnej lekcji przeniesiemy to, czego nauczyliśmy się, do nowego pliku JavaScript w snippets, modyfikując stworzone wcześniej funkcje i podłączymy się do localStorage, by stamtąd ściągać zadania i wyświetlać je już nie w konsoli, tylko na stronie internetowej w przeglądarce.

Do dzieła!