Making entered text appear on the screen without knowing the positions

How can I have the user enter some text (in a textarea, for example), and have it appear on the screen. If the user enters another message, the program should display that underneath the first message, and so on. So far, the user can enter a message and it replaces an empty p element that is already defined. This works when the user enters a single message, but when you enter multiple times, the new text replaces the old text in the p element. Below is what I’ve tried so far.

function displayText(element, change_to) {
  document.getElementById(element).textContent =
    document.getElementById(change_to).value;
  document.getElementById(change_to).value = "";
}
<p id="msg" class="extraSpace"></p>
<textarea id="enterMsg" placeholder="Enter your message here..."></textarea>
<button id="sendButton" onclick="displayText('msg', 'enterMsg')">Send</button>

Answer

You could try appending HTML to the innerHTML of the element.

function displayText(element, change_to) {
  document.getElementById(element).innerHTML +=
    document.getElementById(change_to).value + "<br/>";
  document.getElementById(change_to).value = "";
}
<p id="msg" class="extraSpace"></p>
<textarea id="enterMsg" placeholder="Enter your message here..."></textarea>
<button id="sendButton" onclick="displayText('msg', 'enterMsg')">Send</button>

Or try appending another element to a container (which I recommend):

function displayText(element, change_to) {
  var p = document.createElement("p");
  p.innerText = document.getElementById(change_to).value;
  document.getElementById(element).appendChild(p);
  document.getElementById(change_to).value = "";
}
<div id="msg">
</div>
<textarea id="enterMsg" placeholder="Enter your message here..."></textarea>
<button id="sendButton" onclick="displayText('msg', 'enterMsg')">Send</button>