如何从 ajax 响应中替换 html 元素？我知道的是删除元素，如何用 ajax 响应替换已删除的标签？例如：
我有这样的代码：
<ul id="products">
...............
</ul>
当我单击一个按钮时，ajax 调用会向 codeginter 控制器发出，在那里我收到从数据库中提取的新数据，并在另一个视图中呈现，该视图从 ul 开始，到关闭 ul 结束。
在ajax成功函数中，我这样做：
$('#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);
假设您要更换产品，如果您从控制器获取格式化的 HTML，那么只需执行此操作
success : function(response) {
$('#products').html(response);
}
无需删除
- 标签。您可以简单地将旧的<>替换为新的<>
编辑：pascalvgemert提到的替换函数更好 https://stackoverflow.com/a/19527642/2887034
围绕它创建一个包装器：
<div id="wrapper">
<ul id="products">
...............
</ul>
</div>
现在，您可以执行以下操作：
$('#wrapper').html(responseData);
你可以在之前使用 JQuery
$('#products').before("yourhtmlreceivedfromajax").remove();
或者只是用 html 替换div 的内容$('#products').html("yourhtmlreceivedfromajax");
如果你的主div 在另一个容器中，另一个 id 可以这样做：
基于此结构：
<div id="mainContainer">
<ul id="products">
...............
</ul>
</div>
使用 jquery for ajax 的 JavaScript 代码
$.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/