HTML JS form to div comments (temporary change)
<p>I have seen many similar problems but when I try them they end up failing. It has gotten to the point where my code is totally messed up and I need some help both cleaning it up and fixing my issue. (using chrome)</p>

<p>So far I have tried selecting the value of the form and putting that into a div,
I have tried to use the button as just a link to start the script so that the page doesn't reset and also many other answers found on-line, none of them are helping so I am asking for a personalised help.</p>

<p><div class="snippet" data-lang="js" data-hide="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function on_comment_add() {
 
 var main = document.getElementById("div1");
 var add_user_name = document.createElement("div");
 var add_user_comment = document.createElement("div");
 
 add_user_name.setAttribute("id", "add_user_name");
 add_user_comment.setAttribute("id", "add_user_comment");
 
 &lt;!-- var node = document.createTextNode("This is new."); --&gt;
 var node_1 = document.getElementById("user_name").value;
 var node_2 = document.getElementById("user_comment").value;
 
 add_user_name.appendChild(node_1);
 add_user_comment.appendChild(node_2);
 
 var element = document.createElement("div");
 element.setAttribute("id", "display_comment_div");
 element.appendChild(add_user_name);
 element.appendChild(add_user_comment);
 main.appendChild(element);
 main.innerHTML = element;
 
 return false;
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
 background-color: lightGreen;
}

div.middle {
 width: 80%;
 margin-left: 10%;
 background-color: #47e077;
 height: 940px;
 font-size: 10pt;
 font-family: aubrey;
 border: 3px solid gold;
}

.comments-form {
 text-align: center;
}

#display_comment_div {
 background: rgba(200, 54, 54, 0.1);
 width: 80%;
 margin-left: 9%;
 border: 0.1px solid lightGreen;
 border-radius: 25px;
}

#add_user_name {
 width: 45%;
 float: left;
}

#add_user_comment {
 width: 45%;
 display: inline-block;
 float: right;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="middle"&gt;
 &lt;div class="comments-form"&gt;
  &lt;form&gt;
   &lt;label for="name" style="width:100px; display:inline-block;"&gt;Name&lt;/label&gt;
   &lt;input id="user_name" type="text" placeholder="name goes here" style="width:300px; margin-left:5px;" /&gt;
   &lt;br&gt;&lt;br&gt;
   &lt;label for="comment" style="width:100px; display:inline-block;"&gt;Comment&lt;/label&gt;
   &lt;textarea id="user_comment" placeholder="comment goes here" maxlength="150" style="width:300px;max-width:300px;"&gt;&lt;/textarea&gt;&lt;br&gt;
   &lt;button style="margin-left:310px;" onmousedown="return on_comment_add"&gt;Submit&lt;/button&gt;
   
  &lt;/form&gt;
  &lt;div id="div1"&gt;
  &lt;/div&gt;

  
 &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>I guess what I am asking is if anyone can help me display the username and comment below the form but it seems tricky for me because I have gone through so many answers that don't work for me that I cannot think of any other ways to do it. </p>

<p><strong>For clarification this code is not meant to keep the comments from the form nor is it meant to be a fully functioning site. I am just making slight modifications to some code so that I can hand it in as  a college assignment.</strong></p>