Зміна DOM: створення, редагування та видалення елементів

const li = document.createElement("li");
li.textContent = "Нове завдання";
li.classList.add("task");

document.querySelector("#task-list").appendChild(li);
// або сучасніший append(), що приймає й текст, і кілька елементів одразу:
document.querySelector("#task-list").append(li);

const item = document.querySelector("#task-1");
item.remove(); // сучасний спосіб — видаляє сам себе

// старіший спосіб, досі трапляється в коді:
item.parentElement.removeChild(item);

const card = document.querySelector(".card");

card.classList.add("active");      // додати клас
card.classList.remove("hidden");   // прибрати клас
card.classList.toggle("expanded"); // додати, якщо немає; прибрати, якщо є
card.classList.contains("active"); // true/false — перевірка наявності

const progressBar = document.querySelector(".progress");
progressBar.style.width = `${percent}%`; // динамічне значення, обчислене в коді

const img = document.querySelector("img");
img.getAttribute("src");             // отримати значення атрибута
img.setAttribute("alt", "Опис фото"); // встановити атрибут

// data-* атрибути мають зручний спеціальний доступ:
// <li data-task-id="42">...
taskEl.dataset.taskId; // "42" — camelCase-версія data-task-id

function addTask(text) {
  const li = document.createElement("li");
  li.textContent = text; // textContent — безпечно, навіть якщо text увів користувач
  li.classList.add("task");
  document.querySelector("#task-list").append(li);
}