Подскажите, как лучше решить такую задачу? Нужно, чтобы вставлялся блок "Активных задач нет", если этих блоков с задачами нет. И, собственно скрывался если эти блоки появляются Сделали вот такой вариант, но кажется что это не совсем хорошее решение
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Задачи</title>
</head>
<body>
<ul class="tasks-list" id="tasks">
<li class="tasks-list__item">
<a class="tasks-list__title _gray" href="#">
<span class="tasks-list__text">Задачи</span>
<span class="tasks-list__btn"></span>
</a>
</li>
</ul>
<script>
var list = document.querySelector(".tasks-list");
var countLi = list.getElementsByTagName("li").length;
var taskContainer = document.getElementById("tasks");
if (countLi <= 1) {
var li = document.createElement("li");
var a = document.createElement("a");
var span = document.createElement("span");
li.classList.add("tasks-list__no-tasks");
a.classList.add("tasks-list__title");
span.classList.add("tasks-list__text");
span.innerText = "Активных задач нет";
a.href = "#";
a.appendChild(span);
li.appendChild(a);
taskContainer.appendChild(li);
}
if (countLi >= 1) {
var elemLi = document.getElementsByClassName("tasks-list__no-tasks")[0];
taskContainer.removeChild(elemLi);
}
</script>
</body>