JQuery - ajax load

Question

Hello, I have a div:

<div id="inner">
    Some content...
</div>

Now I need to load some file into inner-block, but save it's old content.

$('#inner').load( 'pathToFile.html' );

Will replace old content of div.

Thanks.

---

So, as I understand my code should be:

old = $('#inner').html();
$('#inner').load( 'pathToFile.html' );
$('#inner').html( old + $('#inner').html() );

?

Answer 1

var oldHtml = $('#inner').html();
$('#inner').load( 'pathToFile.html' );

Answer 2

var originalContent=$('#inner').html();
$('#inner').load( 'pathToFile.html' );

is that what you are after?

Answer 3

I'd recommend against using stuff like 'load' and the other ajax helpers. They're just wrappers around $.ajax. Off the top of my head, maybe you want:

$.ajax( {
  url: 'pathToFile.html',
  type: 'get',
  success: function( r ) {
    $('#inner').append( r );
  }
} );

Answer 4

Instead of the way you doing you need to look at these functions ..

append( content )   Returns: jQuery

Append content to the inside of every matched element.

appendTo( selector )    Returns: jQuery

Append all of the matched elements to another, specified, set of elements. As of jQuery 1.3.2, returns all of the inserted elements.

prepend( content )  Returns: jQuery

Prepend content to the inside of every matched element.

prependTo( selector )   Returns: jQuery

and yes @thenduks method is a better way.