jQuery.html issue and internet explorer

Question

Whenever I use .html withing a jQuery function such as jQuery.ajax it appends in Interent Explorer. Anybody knows what could be causing this?

<script language="javascript">
    /*
    jQuery("#data-grid").html('<b>test</b>');
    jQuery("#data-grid").html('<b>test2</b>');
    */
</script>

OUTPUT: test 2

<script language="javascript">
jQuery(function() {
     jQuery("#data-grid").html('<b>test</b>');
     jQuery("#data-grid").html('<b>test2</b>');
    });
</script>

OUTPUT: test test2

Answer 1

If you wrote:

jQuery("#data-grid").html('<b>test</b>');
jQuery("#data-grid").html('<b>test2</b>');

Anywhere the output should be:

test2 in the data-grid element.

because .html() function is not appending values.

Answer 2

it should be test2 but in internet explorere if I write

   jQuery(function() {
        jQuery("#data-grid").html('<b>test</b>');
        jQuery("#data-grid").html('<b>test2</b>');
    });

The output is test test2 The reason I'm wrapping this in a function is to illustrate that if I have a an ajax call like:

 jQuery.ajax({
     type: method,
     url: file,
     data: params_string,
     timeout: 20000,
     error: function (XMLHttpRequest, textStatus, errorThrown) {
      AJAX_error(XMLHttpRequest, textStatus, errorThrown);
     },
     success: function(html){
      jQuery("#data-grid").html(html);
      AJAX_success();

     }
    });

Lets assume that first AJAX call returns "test" and second "test2". Instead of replacing the content of #data-grid. It appends to it. The ajax call is being called onclick event.