Appending element jquery?

Question

heres a link to the web page s1527.mtchs.org/chat.html

When you submit or hit enter, the value of my textarea is appended to a div. when this happens again, the old value in the div is deleted and appended with the new one? how do I make it so it adds another value instead of deleting the old one?

jQuery:

var captionLength = 0;
var caption = "";

$(document).ready(function()
{
  setInterval ( "cursorAnimation()", 600 );
});

function testTypingEffect()
{ 
if(userInput.value !== "Message")
{
  caption = $("textarea#userInput").val();
  $(caption).append('<div id = content></div>');
  type();
  }
}

function type() 
{
    $('p.caption').html(caption.substr(0, captionLength++));
    if(captionLength < caption.length+1)
    {
        setTimeout("type()", 50);
    }
    else {
        captionLength = 0;
        caption = "";
}   
}
function testErasingEffect()
{
 caption = $("p.caption").html();
  captionLength = caption.length;
 if (captionLength>0)
  {
erase();
 }
 else
  {
$('p.caption').html("You didn't write anything to erase, but ok!");
   setTimeout("testErasingEffect()", 1000);
 }
   }

           function erase()
          {
$('p.caption').html(caption.substr(0, captionLength--));
if(captionLength >= 0)
{
    setTimeout("erase()", 50);
}
else {
    captionLength = 0;
    caption = "";
}   
}

function cursorAnimation() 
{
  $("p.cursor").animate(
 {
   opacity: 0
}, 300, "swing").animate(
 {
 opacity: 1
 }, 300, "swing");
}
$(document).keypress(function(e) {
   if(e.which == 13) {
       testTypingEffect();
  }
});

HTML:

<div id="chatwrapper">
  <div id="tab">chatname</div>
  <div id="content">
    <p id="time"> 2:14:26pm</p>
    <div id="effectTesting">
      <p id="user">\\diablo\\student\2015:</p>
      <p class="caption"></p>
      <p class="cursor">|</p>
    </div>
    <p class="testing"></p>
    <br>
  </div>
  <div id="textarea">
    <textarea id="userInput" onclick="if(this.value=='Message'){this.value=''}" onblur="if(this.value==''){this.value='Message'}">Message</textarea>
    <input type="submit" id="submit" name="submit" value="Submit" onclick="testTypingEffect()"/>
  </div>
</div>

Answer 1

You used .html() instead of .append() on line 21. Changing this was not enough because your dealing with the actual caption length and how to type out the string was not proper so I redid your key functions. See my jsfiddle. I also made it so it adds new content on a new line each time submit is pressed. Also, the cursor will "follow" the content!

See: http://jsfiddle.net/GJBGt/9/

HTML: Your original HTML

CSS:

span{ float:left; clear:both; margin: 5px 0px; overflow: auto;}
#textarea{ float: left; clear:both}
.cursor{ display:inline }

JS:

var caption = "";
//you REALLY DON'T NEED variable captionLength that you had here before

$(document).ready(function()
{
  setInterval ( "cursorAnimation()", 600 );
});

function testTypingEffect()
{ 
if(userInput.value !== "Message")
{
  caption = $("textarea#userInput").val();

  typefirst();
  }
}

function typefirst() 
{
    $('p.caption').append("<span></span>");
    type();
}

function type()
{
    $("span").eq(-1).append(caption.substr(0, 1));
    $(".cursor").appendTo($("span").eq(-1));
    if(caption.length > 0)
    {
        caption = caption.substring(1);
        setTimeout("type()", 50);
    }
    else {
        caption = "";
}   

Answer 2

I'm not exactly sure how you want it to look like in the end, but you're using append() wrong.

Try this:

$("#content").append("<p class='caption'>"+caption+"</p>");

Instead of your:

$(caption).append('<div id = content></div>');

This will add the element <p class="caption">(textarea caption)</p> into the .

You may also want to change your type() animation a bit, something like this:

$('p.caption:last').html(caption.substr(0, captionLength++));

Instead of your:

$('p.caption').html(caption.substr(0, captionLength++));

This is still not perfect since the cursor is not at the bottom, but you can achieve that by appending the new element right above the cursor.