Question

I have a div with content, and clicking on a button will call a page where more data is pulled from the database.

How can I append that new info to the same div?

I was going to use .load(), but that rewrites the data in the div. I thought about loading the content into a hidden div, then using .append() to put it in the right place. But felt like that was an awkward work around.

Is there a better solution?

Answer 1

You can use $.get:

$.get('path_to/file.php', function (data) {
    $('#div_to_append_to').append('<p>' + data + '</p>');
});

This appends the data from your ajax call to the div rather than overwrite its contents all together.

Documentation on $.get – http://api.jquery.com/jQuery.get/