javascript - 在 div 中添加/替换内容

Question

我有一些按钮，当我点击时，我将一个 div 添加到另一个 div，它工作正常，如下所示。

$("div.swatch-opt").append($(divPrice).text());

我面临的问题是，如果我单击具有相同类的另一个按钮，我得到的内容不会被替换，而是被添加。所以基本上要求是替换已经附加的内容。下面是我用来制作 div 的代码。

$.each(priceArr, function(price,val) {
      spanPrice  += "<span>"+val+"</span>";                                    
});

divPrice = "<div class='divPrice'>";   
divPrice += spanPrice;             
divPrice += '</div>'; 

所以 divPrice div 是我想添加到 swatch-opt div 末尾的那个。单击事件会触发 priceArr 的各种结果, 所以每次 divPrice有不同的结果。

一次可以是 - <div class='divPrice'><span>75</span><span>75</span><span>80</span></div>

或者可以是 - <div class='divPrice'><span>75</span><span>75</span><span>80</span></div>

所以如果我应用上面的代码，结果是添加 div 而不是替换它。

Answer 1

要替换内容，请使用 .html 而不是追加。 append 只会插入元素而不是替换它。

 if($("div.swatch-opt").find("div.divPrice").length>0)
{
    $("div.swatch-opt").find("div.divPrice").html($(divPrice).text());
}
else
{
   $("div.swatch-opt").append($(divPrice).text());
}