jQuery .html() 方法似乎覆盖了包含元素答案

【问题标题】：jQuery .html() method seems to overwrite containing elementjQuery .html() 方法似乎覆盖了包含元素
【发布时间】：2010-04-23 20:23:50
【问题描述】：

我正在编写一个 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>

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

【问题讨论】：

标签： jquery html

【解决方案1】：

我猜basket_summary div在basket div里面，像这样：

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

如果是这样的话，当你使用这条线时...

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

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

【讨论】：