Jquery ajax .html doesn't work

success: function(json) {
            for (var i = 0; i < json.length; i++) {
        var response = json[i];
         $('#rv-container').html('<p>' + response.name + '</p>' + '<span>' + response.id + '</span>');
    }
        $('#history_tracking').hide();
    
        }

In the success callback $(#rv-container).html() will not work, but .prepend does.

Why doesn't jQuery allow for .html in the success callback? The problem is the html loaded via ajax keeps on piling up ontop of the data already loaded. So it doesn't replace the data currently in the #rv-container

HTML:

<div id="bottom-toolbar">
  <div id="rv-facet">
    <div id="rv-fix">
      <li id="rv-title">
        Recently Viewed <span class="total_viewed"></span>
        <div id="rv-total" style="float:right; margin-right:25px;"></div>
      </li>
    </div>
    <div id="rv-content">
      <div id="rv-container">
        开发者_Go百科<div id="history_tracking"></div>
      </div>
    </div>
  </div>
</div>

Is there anyway to have prepend replace the contents of the div?

You are calling it in a loop, so obviously it makes a difference whether you are resetting the HTML content over and over (.html()) or prepending more and more to it (.prepend())?

Each iteration of your loop is defining the element's inner HTML.. So per step in the loop, this would basically be like var text = "this is a test", so that variable would never grow. You need to append or prepend the data.

success: function(json) {
            for (var i = 0; i < json.length; i++) {
        var response = json[i];
         $('#rv-container').append('<p>' + response.name + '</p>' + '<span>' + response.id + '</span>');
    }
        $('#history_tracking').hide();

        }