jQuery .html（）方法似乎覆盖了包含元素

Question

我正在编写一个AJAX函数，它返回一些信息显示在<div>中。我的代码如下所示：

HTML：

<div id="basket_summary">Your basket's empty. Why not add some items to get started?</div>

jQuery（ajax调用的相关部分）：

success: function(products){
    $('#basket').html(products.basket);
    $('#basket_summary').html(products.summary);

我可以确认products.summary变量包含我想要显示的文本。

当我第一次运行此代码时，它可以工作，但是当我检查源代码时，<div id="basket_summary">部分被删除，所以第二次调用该函数时，该元素不再存在。如果我在我的AJAX返回数据中包含<div id="basket_summary">，它会添加它，所以我最终得到了这个：

<div id="basket_summary">
    <div id="basket_summary">3 items in your basket</div>
</div>

这不是函数通常对我有用的方式 - 它通常不会触及包含元素。有人可以解决这个问题吗？

Answer 1

我猜测basket_summary div位于篮子div中，如下所示：

<div id="basket">
   <div id="basket_summary">
   </div>
</div>

如果是这种情况，当你使用这一行......

$('#basket').html(products.basket);

...它将擦除篮子div内的所有内容，并将其替换为products.basket中的任何内容。您可能需要使用.prepend()或.append()而不是html（）。