How to replace html element with ajax response

Question

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 receive the new data pulled from the database and rendered in another view which starts from ul and ends at closing ul.

How do I replace the html element from ajax response?

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

Hello @kartik,

Assuming you are replacing your products, if you are getting formatted HTML from your controller then simply do this

success : function(response) {
$('#products').html(response);
}

No need to remove < ul > tag. You can simply replace old < li >s with new < li >s

Hope it helps!!

Thank You!!