Add a new item to the name array list

Question

When clicking the button, the add() function should be triggered by adding a new item to the name list based on the name filled in the input and rendering the new item on screen together with the other previous items. Just that she’s creating a new list, I just want to add the item to the list that already exists.

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').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>

Answer 1

Making a appendChild you are adding a new list in div without removing or replacing the one that is there.

You can do this in two ways:

Method 1: Emptying the div with document.querySelector('#app').innerHTML = ""; before doing the appendChild in function 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));
}

Method 2: Directly with innerHTML:

function adicionar() {
  var inputElement = document.querySelector("#nome").value;
  //nomes = inputElement;
  nomes.push(inputElement);
  document.querySelector('#app').innerHTML = list(nomes).outerHTML;
}

Only that the function list(nomes) is returning an object with the elements and not HTML. In this case you should use outerHTML to convert this object to HTML to work with innerHTML.

Examples

Method 1: Emptying the 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>

Method 2: With 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>