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);
}

无需删除＆lt; ul＆gt;标签。你可以简单地替换旧的＆lt; li＆gt; s with new＆lt; li＆gt; s

Answer 4

您可以使用JQuery before

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

或者只需使用html $('#products').html("yourhtmlreceivedfromajax");

替换div的内容

Answer 5

如果您的主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);
});

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/

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

8 个答案: