title: appendChild function not adding label onto form
body: <p>I am attempting to input a question and have that question appear as an element within a form, <code>"survey-form"</code>. However, when I use JavaScript to append the child node to the <code>"survey-form"</code> 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? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Create Your Own Survey&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="index.css"&gt;
    &lt;script type="text/javascript" src="index.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="model-side"&gt;
      &lt;form id="question-form" method="" action=""&gt;
        &lt;label&gt;Create a question for the survey:&lt;/label&gt;
        &lt;input id="question-box" type="text" size="35" /&gt;&lt;br/&gt;
        &lt;input type="submit" value="Submit Question" /&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  
    &lt;div id="view-side"&gt;
      &lt;form id="survey-form" method="" action=""&gt;
        &lt;label&gt;Current View&lt;/label&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>