在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末尾添加的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());
}

Answer 2

您要创建一个html文本（divPrice），然后在将最后一个追加到父div时使用$(divPrice).text()函数，这是无用的，因为它将仅追加divPrice中包含的文本，

因此，要实现您想要的功能，请使用$("div.swatch-opt").append(divPrice);并删除再次单击时最后添加的内容，您只需添加$("div.swatch-opt").find(".divPrice").remove();

请参见下面的示例代码片段：

var priceArr = [],
  spanPrice = "",
  divPrice = "";
$(".btn").on("click", function(e) {
  priceArr = [];
  spanPrice = "";
  divPrice = "";
  this.innerHTML == "S" ? priceArr = [75, 75, 80] : (this.innerHTML == "M" ? priceArr = [70, 70, 80] : priceArr = [65, 70, 85]);

  $.each(priceArr, function(price, val) {
    spanPrice += "<span>" + val + "</span>";
  });
  divPrice = "<div class='divPrice'>";
  divPrice += spanPrice;
  divPrice += '</div>';
  
  $("div.swatch-opt").find(".divPrice").remove();
  $("div.swatch-opt").append(divPrice)
})

.btn {
  width: 30px;
  height: 20px;
  background-color: gray;
  border: 1px solid black;
  text-align: center;
  display: inline-block;
  margin: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="btn">S</div>
<div class="btn">M</div>
<div class="btn">L</div>
<div class="swatch-opt">

</div>