Abordagem 2: Usar funções de atualização do DOM

Vamos abordar agora nossa segunda opção. Você poderia criar uma função que atualize o DOM ao adicionar um elemento no final da list:

function adicionarItem(item) {
  var node = document.createElement('li');
  node.textContent = item;
  document.querySelector('ul').appendChild(node);
}

Funciona! E pode acreditar, é rápido. Mas a medida que adicionamos ou precisamos de outras funcionalidades, essa abordagem começa a gerar bastante trabalho. Sabe porque? Imagine criar uma função de manipulação do DOM para cada um dos cenários abaixo:

1. Adicionar um item no topo da lista
2. Adicionar um item no meio da lista
3. Remover um item
4. Ordenação dos items
5. etc.

Escrever funções de atualização de DOM para cada tipo de alteração de dados rapidamente incha nossa base de código e criaria um maior potencial para erros.