Add text to the bottom of a div (or another element) - emulating chat console

Question

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 respo

Answer 1

If you use

$("#prisonerResponse").html(responseTxt + '\n');

it will replace all content with the new one.

If you just want to add it at the end, use append:

$("#prisonerResponse").append(responseTxt + '\n');

Answer 2

I would use a different way to solve this problem. Maybe I'm wrong but it sounds like you want to emulate a chat console, displaying the text lines in reverse order. In that case I would use UL/LI structure wrapped around a DIV; somehow I believe this is the fastest way since we don't care about the previous lines - we just append the new ones, adding another LI to the end of the UL element. Check the snippet out

// JavaScript - Tested on IE11, Firefox, Chrome, Opera and Safari
window.onload = function(){
    var div = document.getElementById("wrapper"),
        ul = document.getElementById("list"),
        input = document.getElementById("text"),
        flag = false, 
        li;
    input.onkeypress = function(e){
        e = e || window.event;
        var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
        if (charCode == 13) {
            li = document.createElement("LI");      
            li.innerHTML = input.value;
            ul.appendChild(li);
            li.scrollIntoView();
            if(ul.offsetHeight >= div.offsetHeight && flag !== true){
                ul.style.height = div.offsetHeight + "px";
                flag = true;
            }
            document.getElementById("text").value = "";
        }   
    };
};

/* CSS */
#wrapper {
    position:relative; height:200px; width:300px; background-color:#fff;
}  
#list {
    margin:0px; padding:0px; position:absolute; bottom:0px; left:0px; width:inherit; overflow:hidden; overflow-y:scroll;
}
#text { 
    width:300px; 
}

<!-- HTML -->
<div id="wrapper"> 
    <ul id="list"></ul>
</div> 
<input type="text" id="text" name="text" value="" />

Check the working jsBin (on Firefox, Chrome, Opera and Safari) or jsFiddle (on IE11)

Answer 3

This is a basic solution based on two main functions appendChild and scrollIntoView. The former appends the new response in the list (as a log). And the second fix the view in the last element appended.

Also we need to fix the height of the <ul> tag by using the size of the

var wrapper = document.getElementById('prisonerResponse');
var commands = document.getElementById('commands');
var flag = false;

window.onload = function() {
  var command;
  var input = document.getElementById('text');

  document.getElementById("text").onkeypress = function(e) {
    e = e || window.event;
    var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
    if (charCode == 13) {
      command = document.createElement('li');
      command.innerHTML = input.value;
      commands.appendChild(command);
      command.scrollIntoView();
      fixHeight()
      document.getElementById("text").value = "";
    }
  };
};

function fixHeight() {
  if (commands.offsetHeight >= wrapper.offsetHeight && flag !== true) {
    commands.style.height = wrapper.offsetHeight + "px";
    flag = true;
  }
}

#prisonerResponse {
  position: relative;
  height: 100px;
  width: 350px;
  background-color: #fff;
  margin: 10px;
}

#prisonerResponse .overlay {
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  position: absolute;
}

#prisonerResponse .gradient {
  background-image: linear-gradient( top, rgba( 255, 255, 255, 0) 0%, rgba( 255, 255, 255, 1) 100%);
  background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, 0) 0%, rgba( 255, 255, 255, 1) 100%);
  background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, 0) 0%, rgba( 255, 255, 255, 1) 100%);
  background-image: -o-linear-gradient( top, rgba( 255, 255, 255, 0) 0%, rgba( 255, 255, 255, 1) 100%);
  background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0) 0%, rgba( 255, 255, 255, 1) 100%);
}

#commands {
  margin: 0px;
  padding: 0px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: inherit;
  overflow: hidden;
  overflow-y: scroll;
}

#text {
  width: 350px;
  display: inline-block;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Add text to the bottom of a div</title>
</head>

<body>
  <p id="prisoner"> Prisoner One </p>
  <br>
  <p id="command">address the prisoner:</p>
  <div id="prisonerResponse" class="overlay gradient">
    <ul id="commands"></ul>
  </div>

  <input type="text" id="text" name="text" value="">
</body>

</html>