jQuery & AJAX -- populating a list?

I've made jQuery & AJAX script that uses a PHP function to bring back results from an API. That part works great, but everytime I search for a new book, it removes the previous search results.

I want to give it a book ID, search, get results, and continue doing that. Every time I click "search", I want to populate a list with more books.

This code keeps removing my previous book and replacing it with the new book I've searched for.

Any ideas?

isbn.php:

<script src="http://code.jquery.com/jquery-1.5.js"></script>
<form method="post" action="ajax.php" id="searchForm"> 
    <input type="text" name="isbn" placeholder="Search..." />
    <input class="myaccount" id="doSearch" name="doSearch" type="submit" value="Search" />
</form>

<div id="result"></div>

{literal}
<script>
// attach a submit handler to the form
$("#searchForm").submit(function(event) {
// stop form from submitting normally
event.preventDefault(); 

// get some values from elements on the page:
var $form = $( this ),
term = $form.find( 'input[name="isbn"]' ).val(),
//term = "isbn",
url = $form.attr( 'action' );
    开发者_运维问答$.post( url, { doSearch: "Search", isbn: term } ,
        function( data ) {
            var content = $( data );
          $( "#result" ).html( content );
      }
    );
});
</script>

ajax.php does the API call and prints the results inside of isbn.php.

if you are just trying to append the content then:

$( "#result" ).append( content );

if you want the new results to go to the top of the results div then

$( "#result" ).prepend( content );

using $( "#result" ).html( content ); tells jQuery to replace the entirety of any HTML inside #result with the new content

The problem is in your ajax success function you are rewriting the entire content of the #result block. If you changed .html to .append this should just make it additive rather than replacing.