Javascript: Repopulate a list of objects with appendChild and for loop

Question

For reference: https://codepen.io/skypod/pen/veaRvN

phraseArray = ["hello", "hi", "bye", "goodbye"];

addPhrase = function() {
  debugger;
  var getBox = document.getElementById('paragraphBox');
  var makeParagraph = document.createElement('p');
  getBox.innerHTML = "";
    for (var i = 0; i < phraseArray.length; i++ ) {
    getBox.appendChild(makeParagraph);
    makeParagraph.innerHTML = phraseArray[i];
    }
}

So I'm trying to get my head wrapped around creating objects in javascript.

The code I've used feels like it should clear the div that I'm adding my objects to, then repopulate it with a new set of objects.

In case anyone is wondering, the purpose is to have it react dynamically to having information changed in the array.

Right now, it only ever finishes with one object created (the last paragraph in the array). I'm under the impression that the for loop should be creating a new paragraph element each time and appending it to the last element inside my div. I must be confused by how these functions work though.

Answer 1

It looks like you're only creating one element and then trying to re-append it. You need to be executing document.createElement('p') within your loop.