div content disappearing after displaying

I'm starting on coding chat function in my web application. What I want is after user hitting send button, what they texted will be displayed in the chatting div immediately.

I use jQuery to perform this function, however, I found that after displaying the content, it disappears immediately. Did I miss som开发者_StackOverflow社区ething?

<script type="text/javascript">
    function Send() {

        var original = $('#contentDIV').html();
        var text = $("[id$='TextBox1']").val();
        $('#contentDIV').html(original + "<br />" + text);
    }
</script>


<div id="contentDIV" style="height:400px;overflow:auto">

</div>

<input name="TextBox1" type="text" id="TextBox1" style="width:400px;" />


<input type="button" name="Button1" value="Button" onclick="Send();__doPostBack('Button1','')" id="Button1" />

This seems to be working. I made the JS unobstructive.

http://jsfiddle.net/eTRRP/

$("#chat").click(function() {
  Send();
}); 

function Send() {   
  var text = $("#TextBox1").val();
  $('#contentDIV').append(text + "<br />");
}
<div id="contentDIV" style="height:400px;overflow:auto">
</div>

<input name="TextBox1" type="text" id="TextBox1" style="width:400px;" />
<input type="button" name="Button1" value="Button" id="chat" />

Sounds as if, however, you've got an issue with your ASP helper :)

var original = $('#contentDIV').html(); should do the trick but you can also use append:

$('#contentDIV').append("<br />" + text);

it should be

    var original = $('#contentDIV').html();
    var text = $("[id$='TextBox1']").val();
    $('#contentDIV').html(original + "<br />" + text);

or

    var text = $("[id$='TextBox1']").val();
    $('#contentDIV').append("<br />" + text);

Your __doPostBack('Button1','') function probably refreshes the page so you lose all the client side changes that you just made.