appendChild function not adding label onto form

I am attempting to input a question and have that question appear as an element within a form, "survey-form". However, when I use JavaScript to append the child node to the "survey-form" the text appears for half a second before disappearing. It seems the label element is appended but then deleted. Any idea on how to fix this?

window.onload = init;

function init() {
  document.getElementById("question-form").addEventListener("submit",
    validateQuestion);
}

function validateQuestion() {
  let questionValue = document.getElementById("question-box").value;
  if (questionValue == "" || questionValue == undefined) {
    alert("Fill the box with information so it can be added to the survey!");
    return;
  } else {
    addQuestion(questionValue);
  }
}

function addQuestion(question) {
  let label = document.createElement("label");
  label.innerHTML = question;

  document.getElementById("survey-form").appendChild(label);
}

<!DOCTYPE html>
<html>

<head>
  <title>Create Your Own Survey</title>
  <link rel="stylesheet" type="text/css" href="index.css">
  <script type="text/javascript" src="index.js"></script>
</head>

<body>
  <div id="model-side">
    <form id="question-form" method="" action="">
      <label>Create a question for the survey:</label>
      <input id="question-box" type="text" size="35" /><br/>
      <input type="submit" value="Submit Question" />
    </form>
  </div>

  <div id="view-side">
    <form id="survey-form" method="" action="">
      <label>Current View</label>
    </form>
  </div>
</body>

</html>

Solution

Just add: event.preventDefault().

The Event interface's preventDefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be. The event continues to propagate as usual, unless one of its event listeners calls stopPropagation() or stopImmediatePropagation(), either of which terminates propagation at once.

Something like this:

window.onload = init;

function init() {
  document.getElementById("question-form").addEventListener("submit",
    validateQuestion);
}

function validateQuestion(event) { // Add event to get the question-form context.
  event.preventDefault(); // Prevent the default action of the question-form in the form submission.
  let questionValue = document.getElementById("question-box").value;
  if (questionValue == "" || questionValue == undefined) {
    alert("Fill the box with information so it can be added to the survey!");
  } else {
    addQuestion(questionValue);
  }
}

function addQuestion(question) {
  let label = document.createElement("label");
  label.innerHTML = question;

  document.getElementById("survey-form").appendChild(label);
}

<!DOCTYPE html>
<html>

<head>
  <title>Create Your Own Survey</title>
  <link rel="stylesheet" type="text/css" href="index.css">
  <script type="text/javascript" src="index.js"></script>
</head>

<body>
  <div id="model-side">
    <form id="question-form" method="" action="">
      <label>Create a question for the survey:</label>
      <input id="question-box" type="text" size="35" /><br/>
      <input type="submit" value="Submit Question" />
    </form>
  </div>

  <div id="view-side">
    <form id="survey-form" method="" action="">
      <label>Current View</label>
    </form>
  </div>
</body>

</html>