How to replace html element with ajax response?

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

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

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

EDIT: The replaceWith function mentioned by pascalvgemert is better https://stackoverflow.com/a/19527642/2887034

Create a wrapper around it:

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

Now you can do the following:

$('#wrapper').html(responseData);

You can use JQuery before

$('#products').before("yourhtmlreceivedfromajax").remove();

Or just replace the content of the div with html $('#products').html("yourhtmlreceivedfromajax");

Related