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">部分被删除,所以第二次调用该函数时,该元素不再存在.如果我<div id="basket_summary">在我的AJAX返回数据中包含它,它会添加它,所以我最终得到这个:

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

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