javascript - 如何用ajax响应替换html元素？

Question

如何从 ajax 响应中替换 html 元素？我知道要删除元素，如何用 ajax 响应替换已删除的标签？例如：

我有这样的代码：

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

当我单击一个按钮时，将对 codeginter 控制器进行 ajax 调用，在该控制器中我接收从数据库中提取的新数据并呈现在另一个视图中，该视图从 ul 开始并在关闭 ul 处结束。

在 ajax 成功函数中，我这样做：

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

Answer 1

您可以使用 replaceWith（参见：http ://api.jquery.com/replaceWith/ ）

喜欢：$('#products').replaceWith(response);

Answer 2

编辑：pascalvgemert 提到的 replaceWith 函数更好https://stackoverflow.com/a/19527642/2887034

围绕它创建一个包装器：

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

现在您可以执行以下操作：

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

Answer 3

假设您要更换产品，如果您从控制器获取格式化的 HTML，那么只需执行此操作

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

无需删除 <ul> 标签。您可以简单地用新的 < li >s 替换旧的 < li >s

Answer 4

之前可以使用 JQuery

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

或者只是用html替换div的内容 $('#products').html("yourhtmlreceivedfromajax");

Answer 5

如果您的主 div 在另一个具有另一个 id 的容器内，您可以这样做：

基于此结构：

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

使用 jquery 进行 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);
});

Answer 6

一个简单的方法是将你的 ul 包装在一个容器中

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

在ajax响应中

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

Answer 7

.remove()将元素完全从 DOM 中取出。如果你只是想替换products元素内的东西，你可以使用.ReplaceWith()。

如果您<li>以 HTML 格式返回所有内容，则可以使用.html()

Answer 8

做这个

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

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