Hi there.
I have a simple textarea tag built and also a very simple script which inserts the text of the text value into textarea . Please copy and paste that to understand what I mean . And when you submit send button the new inserted line pushes all others down . I want exactly the opposite . So when you send the text it will appear from the bottom and will push the rest of lines UP(like normal in ordinary live chats). And I also want to uppear a scroll on the right using which i can move it up and see the text that hasve been inserted before.

        <div id="json"></div>
        <style> #textarea { background-color:#F3F3F3;}</style>
    <body onload="insertMessages()">   
        <script type="text/javascript"> 
            function send(){


        <TEXTAREA id="textarea" COLS="80" ROWS="20"></TEXTAREA><br/><br/>
        <input type="text" id="text"  size="96" > 
        <input type="button" value="Send"  onclick="send()"> 

If you write one long line that does everything it's impossible to debug, even with a good tool like Firebug. Break it up:

//bad: doc.getEById( 'id here' ).value += doc.getAnotherEById.value + ...;

// try:
var ta = document.getElementById( 'textarea' );
alert( ta );
var ta_value = ta.value;
alert( ta_value);
var text = document.getElementById( 'text' );
alert( text );
var text_value = text.value;
alert( text_value );
ta_value += text_value + '\n';
alert( ta_value );
ta.value = ta_value;

Errors tend to fall right out at you when you work this way. It takes a bit more typing, but it's way faster. When you are debugged, just comment out the alerts, but leave them there for next time.