title: Scroll Down on innerHTML function in Native JS
body: <p>I am currently working on a project that will not allow for jQuery and I am very new to JavaScript and OO programming as a whole (Two weeks). You can see the entirety of the project in the following repo: <a href="https://github.com/Sntax/jsChat/blob/master/script.js" rel="nofollow">https://github.com/Sntax/jsChat/blob/master/script.js</a></p>
  
  <p>Basically I am creating a simple chat app as a learning project. I am injecting HTML into a div onClick or Enter/Tab using: </p>
  
  <pre><code>var jsChat = {
    username: document.getElementById('username'),
    comment: document.getElementById('comment'),
    output: document.getElementById('output'),
  };
  
  function postData(){
    jsChat.output.innerHTML += '&lt;div class="username"&gt;' + jsChat.username.value + ':' + '&lt;/div&gt;';
    jsChat.output.innerHTML += '&lt;div class="comment"&gt;' + jsChat.comment.value + '&lt;/div&gt;';
    clearContent();
  }
  </code></pre>
  
  <p>Right now it will print to the div successfully but once the "comments" become too long for the div-height, they will auto scroll off the bottom of the page and out of sight. I am wanting to setup a way to force the scroll to "scroll down" to the bottom of the div so that it rather scrolls old chat comments off the top of screen much like a normal chat application. </p>
  
  <p>Ninja Edit: I tried throwing the following into the postData() function to no avail: </p>
  
  <pre><code>    jsChat.output.scrollTop = 99999;
  </code></pre>