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

Posted 2023-02-24

【中文标题】如何用ajax响应替换html元素？

【英文标题】：How to replace html element with ajax response?

【发布时间】：2013-10-31 21:31:36

【问题描述】：

如何替换 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?

【问题讨论】：

您可以根据需要使用.append 或.html。请记住，.remove 完全删除了元素，可能您需要.empty 向我们展示从AJAX 返回的内容，是否全部为<li>？如果是这样，您可以使用.html，它也会清空内容并放入新内容。

Using jQuery to replace one tag with another 的可能重复项

是要替换整个UL，还是只填内容？

您的 ajax 代码的其余部分在哪里？根据您的回复格式.. 如果您的回复是 html 格式，那么您需要做的就是将回复附加到 #products

【参考方案1】：

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

点赞：$('#products').replaceWith(response);

【讨论】：

它正在工作，但被替换的内容被破坏/格式不正确。让我告诉你，新视图稍微改变了 HTML。较旧的以网格格式显示结果，较新的以列表格式显示结果。对于 replaceWith 函数，新旧 HTML 的结构必须完全相同？

也许可以试试$('#products').replaceWith($(response));。如果样式看起来不同，也许检查你的 CSS 选择器。它们必须相同。

【参考方案2】：

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

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

不需要删除

标签。您可以简单地将旧的 s 替换为新的 s

【参考方案3】：

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

围绕它创建一个包装器：

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

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

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

【参考方案4】：

你可以使用JQuery before

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

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

【参考方案5】：

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

基于这个结构：

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

使用 ajax 的 jquery 的 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);
);

【参考方案6】：

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

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

在 ajax 响应中

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

【参考方案7】：

.remove() 将元素完全从 DOM 中取出。如果您只想替换 products 元素中的内容，请使用 .ReplaceWith()。

如果您将所有 <li> 作为 HTML 返回，则可以使用 .html()

【参考方案8】：

这样做

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

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