Fazendo um appendChild
você está adicionando uma nova lista na div sem remover ou substituir a que está lá.
Você pode fazer isso de duas formas:
Método 1: Esvaziando a div com document.querySelector('#app').innerHTML = "";
antes de fazer o appendChild
na função adicionar()
:
function adicionar() {
var inputElement = document.querySelector("#nome").value;
//nomes = inputElement;
nomes.push(inputElement);
document.querySelector('#app').innerHTML = ""; // esvazia a div
document.querySelector('#app').appendChild(list(nomes));
}
Método 2: Diretamente com innerHTML
:
function adicionar() {
var inputElement = document.querySelector("#nome").value;
//nomes = inputElement;
nomes.push(inputElement);
document.querySelector('#app').innerHTML = list(nomes).outerHTML;
}
Só que a função list(nomes)
está retornando um objeto com os elementos e não o HTML. Neste caso você deve usar outerHTML
para converter esse objeto em HTML para funcionar com o innerHTML
.
Exemplos
Método 1: Esvaziando a div:
var nomes = ['Diego', 'Gabriel', 'Lucas'];
//var btnElement = document.querySelector('button.btn');
function adicionar() {
var inputElement = document.querySelector("#nome").value;
//nomes = inputElement;
nomes.push(inputElement);
document.querySelector('#app').innerHTML = ""; // esvazia a div
document.querySelector('#app').appendChild(list(nomes));
}
function list(array) {
//Cria a lista do elemento
var listElement = document.createElement("ul");
//listElement.setAttribute('id', 'myList');
for (var i = 0; i < array.length; i++) {
//Cria a lista de item
var itemElement = document.createElement('li');
//Defini seu conteudo
itemElement.appendChild(document.createTextNode(array[i]));
//Adiciona um item a lista
listElement.appendChild(itemElement);
}
return listElement;
}
// Add the contents of options[0] to #foo:
document.querySelector('#app').appendChild(list(nomes));
<div class="container">
<div class="form-inline">
<div class="form-group mx-sm-3 mb-2">
<label class="sr-only">Nome</label>
<input type="text" class="form-control" id="nome" placeholder="Nome">
</div>
<button type="submit" class="btn btn-primary mb-2" onclick="adicionar()">Adicionar</button>
</div>
<div id="app"></div>
</div>
Método 2: Com innerHTML:
var nomes = ['Diego', 'Gabriel', 'Lucas'];
//var btnElement = document.querySelector('button.btn');
function adicionar() {
var inputElement = document.querySelector("#nome").value;
//nomes = inputElement;
nomes.push(inputElement);
document.querySelector('#app').innerHTML = list(nomes).outerHTML;
}
function list(array) {
//Cria a lista do elemento
var listElement = document.createElement("ul");
//listElement.setAttribute('id', 'myList');
for (var i = 0; i < array.length; i++) {
//Cria a lista de item
var itemElement = document.createElement('li');
//Defini seu conteudo
itemElement.appendChild(document.createTextNode(array[i]));
//Adiciona um item a lista
listElement.appendChild(itemElement);
}
return listElement;
}
// Add the contents of options[0] to #foo:
document.querySelector('#app').appendChild(list(nomes));
<div class="container">
<div class="form-inline">
<div class="form-group mx-sm-3 mb-2">
<label class="sr-only">Nome</label>
<input type="text" class="form-control" id="nome" placeholder="Nome">
</div>
<button type="submit" class="btn btn-primary mb-2" onclick="adicionar()">Adicionar</button>
</div>
<div id="app"></div>
</div>