Consegui fazer legal o exemplo da aula proposto na parte da mão na massa, mas depois fiz o mesmo exemplo aproveitando o exercício da aula anterior entretanto não aparece o afazer na lista.
<!-- Código html -->
<body>
<ul class="afazeres">
<li>Ir ao médico</li>
<li>Trocar a senha do Wifi</li>
<li>Estudar Javascript</li>
</ul>
<form class="adicionar-tarefa">
<input type="text" name="tarefa">
<button id="botao-adicionar">Salvar</button>
</form>
<script src="js/teste.js"></script>
</body>
//Código JavaScript
var form = document.querySelector('.adicionar-tarefa');
var botao = document.querySelector('#botao-adicionar');
botao.addEventListener("click", function(event){
event.preventDefault();
var form = document.querySelector('.adicionar-tarefa');
var tarefa = form.tarefa.value;
var afazeresUl = document.createElement("ul");
var tarefaLi = document.createElement("li");
tarefaLi.textContent = tarefa;
afazeresUl.appendChild(tarefaLi);
console.log(afazeresUl);
//Código para adicionar na lista de tarefas
});
O motivo é que isso só funciona com tabelas? No inspecionar elemento, no console aparece o UL e o li, mas não é add na página.