Gostaria de saber se existe diferença entre esta abordagem e o InnerHtml. O código funciona da mesma maneira.
const criarTarefa = (event) => {
event.preventDefault();
const input = document.querySelector('[data-form-input]');
const valor = input.value;
const lista = document.querySelector('[data-list]');
tarefa = document.createElement("li");
tarefa.textContent = valor;
tarefa.classList.add("task");
lista.appendChild(tarefa);
input.value = "";
}
const novaTarefa = document.querySelector('[data-form-button]');
novaTarefa.addEventListener('click', criarTarefa);
