Question

This code calls in the new data and places it into the div but it doesn’t REPLACE the old htm. It just adds to it. There are errors in the code but I can’t find them. How do I get it to replace the htm file not just add to the data?

.click(function () {

  $('.tabActive').removeClass('tabActive');
  $(this).addClass('tabActive');
  var lesson = $(this).attr('.lesson');
  var self = this
  $("#loading").show();

  setTimeout(function () {

    $.ajax({
      type: "GET",
      url: 'lessons/' + lesson + '.htm',
      datatype: "html",
      success: function (data) {
        $('#sectionTabContent').append(data);
      },
      complete: function () {
        $("#loading").hide();
      }
    })
  }, 3000);
});
}

HTML

<div id='sectionThreeTabs'>                           
    <div id='' class='sectionThreeTab tabActive' lesson='first'>
        Try
    </div>
    <div class='sectionThreeTab' lesson='second'>
        Anger
    </div>
    <div class='sectionThreeTab' lesson='third'>
        Size
    </div>
</div>

Answer 1

Change

 $('#sectionTabContent').append(data);

to

 $('#sectionTabContent').html(data);