How to replace html element with ajax response?

Question

How do I replace the html element from ajax response? What I know to is to remove the element, how do I replace that removed tag with ajax response? For example:

I have code like this:

<ul id="products">
...............
</ul>

When I click on a button the ajax call is made to codeginter controller where I recieve the new data pulled from the database and rendered in another view which starts from ul and ends at closing ul.

In ajax success function I do this:

$('#products').remove();
//What to do now here to replace the removed portion with response of ajax?

Answer 1

You can use replaceWith (see: http://api.jquery.com/replaceWith/)

Like: $('#products').replaceWith(response);