Atualizar uma lista baseada em um array

Front-end JavaScript
#1

Tenho um código que preenche uma ul baseado em um array de nomes.
Tenho também um campo input e um botão adicionar que faz um push para adicionar novos nomes.
O push está funcionando adiciona novos itens ao final do array normalmente.
O problema que estou tendo é não estar conseguindo atualizar a lista que já está na tela.

O código que tenho até agora:

const appEl = document.querySelector('#app');
const btnEl = document.querySelector('#add');
const inputEl = document.querySelector('#input');
const ulEl = document.createElement('ul');

var names = ['Diego', 'Gabriel', 'Lucas'];

appEl.appendChild(ulEl);
names.forEach(makeList);

function makeList(el, index, arr) {
	const liEl = document.createElement('li');
	ulEl.appendChild(liEl);
	liEl.innerHTML += el;
}

btnEl.onclick = add => {
	names.push(inputEl.value);
	inputEl.value = '';
}
#2

Olá amigo, alterei o código no onclick, para apagar a lista que estava sendo exibida, e colocar uma nova lista com o elemento adicionado.

const appEl = document.querySelector('#app');
const btnEl = document.querySelector('#add');
const inputEl = document.querySelector('#input');
const ulEl = document.createElement('ul');

var names = ['Diego', 'Gabriel', 'Lucas', 'Francisco'];

appEl.appendChild(ulEl);
names.forEach(makeList);

function makeList(el, index, arr) {
	const liEl = document.createElement('li');
	ulEl.appendChild(liEl);
	liEl.innerHTML += el;
}

btnEl.onclick = add => {
    names.push(inputEl.value);
    ulEl.innerHTML = '';
    names.forEach(makeList);
}

Pode visualizar o resultado neste link.

1 curtida
#3

Muito obrigado, realmente não tinha pensado dessa forma.