Как заменить элемент html на ajax-ответ?

Как заменить элемент html на ответ ajax? Я знаю, что это удалить элемент, как заменить этот удаленный тег на ajax-ответ? Например:

У меня такой код:

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

Когда я нажимаю кнопку, вызов ajax выполняется в контроллер codeginter, где я получаю новые данные, вытащенные из базы данных и отображаемые в другом представлении, которое начинается с ul и заканчивается при закрытии ul.

В функции ajax success я делаю это:

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

Вы можете использовать replaceWith (см .: http://api.jquery.com/replaceWith/ )

Например: $('#products').replaceWith(response);

EDIT: функция replaceWith, упомянутая pascalvgemert, лучше https://stackoverflow.com/a/19527642/2887034

Создайте вокруг него обертку:

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

Теперь вы можете сделать следующее:

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

Вы можете использовать JQuery раньше

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

Или просто замените содержимое div на html $('#products').html("yourhtmlreceivedfromajax");

Если ваш основной div находится внутри другого контейнера с другим идентификатором, вы можете сделать это:

Основываясь на этой структуре:

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

Javascript-код с помощью jquery для ajax

 $.ajax({ url: "action.php", context: document.body }).done(function(response) { $('#products').remove(); // you can keep this line if you think is necessary $('mainContainer').html(response); }); 

Простым способом является обертывание вашей ul в контейнер

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

в ответе ajax

 success:function(data){ $("#container").html(data) } 

.remove () полностью выводит элемент из DOM. Если вы просто хотите заменить элемент внутри элемента products , вы используете .ReplaceWith () .

Если вы возвращаете все <li> как HTML, вы можете использовать .html ()

Сделай это

 $( "ul#products" ).replaceWith( response ); 

http://api.jquery.com/replaceWith/

Предполагая, что вы заменяете свои продукты, если вы получаете отформатированный HTML-код от своего контроллера, тогда просто сделайте это

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

Не нужно удалять тег <ul>. Вы можете просто заменить старые <li> s новыми <li> s