jQuery load() issue

Question

I have a page: index.html with some content:

<section id="content">
...
</section>

I'm trying to use jQuery (with jQuery Address) to update content without reloading from other HTML files with the same section tag with the same id.

I'm stucked with this:

  $.address.init(function(event) {
    console.log("init: " + $('[rel="address:' + event.value + '"]').attr('href'));
  }).change(function(event) {
    $("#content").load($('[rel="address:' + event.value + '"]').attr('href') + ' #content');
    console.log("change");
  });

It almost works. But! It inserts one more <section id="content"> with </section>, so everything blows up.

How I can get rid of one <section id="content"> + </section>?

Answer 1

Instead of .load() use a combination of $.get() and .replaceWith().

$('#content').html().load() ...

use

$.get({
  url:...,
  success:function(data) {
    $('#content').replaceWith( data )
  }
});