title: Add text to the bottom of a div (or another element) - emulating chat console
body: <p>I have a div that should be collecting text as text is entered into the input box (right now it just reproduces the input, but later it should produce semi-intelligent responses.)</p>
  
  <p>I want the text to appear at the bottom of the div, at the dark end of the gradient. I want fresh text to always be at the bottom and old text to rise up into the greyness of the upper scrolling area. <code>In other words, I'd like to reach the effect like in a terminal or on a chat console.</code></p>
  
  <p>The page is here: <a href="http://mindseyetutoring.com/interrogate.html" rel="nofollow">http://mindseyetutoring.com/interrogate.html</a></p>
  
  <p>Here is my code (I'll eliminate the ajax aspect to minimally represent the problem):</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt;
      &lt;link rel="stylesheet" type="text/css" href="interroStyle.css"&gt;
      &lt;script src="jquery/jquery.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          function process(){
             $('#userInput').keypress(function(e){
                if (e.keyCode == 13){
                   var userTxt = $("#userInput").val();
                   $("#prisonerResponse").html(userTxt);
                }
             })
          }
      &lt;/script&gt;
      &lt;/head&gt;
      &lt;body onload = "process()"&gt;
          &lt;p id="prisoner"&gt; Prisoner One &lt;/p&gt;
          &lt;br&gt;
          &lt;p id="command" &gt;address the prisoner:&lt;/p&gt;
          &lt;input type="text" id="userInput" /&gt;
          &lt;div class="transcript" id="prisonerResponse"&gt;
                  &lt;p&gt;
                  &lt;/p&gt;            
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and some of the css:</p>
  
  <pre><code>#prisonerResponse {
      overflow: scroll;
      width: 350px;
      height: 100px;
      display: inline-block;
      margin: 10px;
      position: relative;
  }
  #prisonerResponse:before {
      content:"";
      width: 350px;
      height: 100px;
      position: fixed;
      background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
      background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  }
  </code></pre>