title: How to put text on top of the other text in div
body: <p>Hi I'm trying to make a comment section on my website and the code that I've written places the comment that I type in below the comment that is already typed in.</p>
  
  <p>what I really want to do is that to place the newly typed comment above the old comments (like facebook or youtube or any other websites - when you type the comment in, it appears above the older comments (in the first row)) How do I do this by using javascript? Thank you. Below is the code that I've written.</p>
  
  <pre><code>&lt;input id = "txtboxComment" type = "text" onkeyup = "typeComment(event)" placeholder = "Write a comment"/&gt;
  &lt;div id = "comment"&gt;&lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>#txtboxComment { 
      float: left;
      width: 600px;
      height: 25px;
      margin-left: 10px;
      margin-top: 10px;}
  
  #comment {
      border: solid 1px;
      float: left;
      width: 602px;
      height: auto;
      margin-left: 51px;
      margin-top: 10px;
  }
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>function typeComment(e) {
      co = document.getElementById("txtboxComment");
      if (e.keyCode == 13) {
          co.click();
          document.getElementById("comment").innerHTML += "&lt;pre&gt;" + co.value  + "\n" + "&lt;/pre&gt;";
  }
  </code></pre>