如何將按鈕動態附加到div

Question

這是我的代碼

<div class="EquipmentContent row">
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 subSection" style="float:right;background:#dff0ff;">         
        <section class="col-xs-12 col-sm-1 cl-md-1 col-lg-1">
          <button type="button" style="display: inline-block;float:right;" class="btn btn-danger" onclick="hideEquipmentDetails()"><i class="fa fa-times"></i></button>
        </section>
      </div>
    </div>

這是動態加載div數據

var content= response.data.filters;
$.each(content,function(i,value){ 
    $('.subSection').html('<section class="col-xs-12 col-sm-2 cl-md-2 col-lg-2"><label class="equipmentHeaderlable">Name</label><label class="equipmentHeaderValues">'+value.name+'</label></section>').appendTo('.EquipmentContent');
});

它正確地循環通過，但只顯示第一個對象。（即，我在數組中有6個名稱，但僅顯示第一個名稱）。為什么？我也嘗試通過添加滾動和高度來進行嘗試。

還有一件事，如何動態添加此部分？

<section class="col-xs-12 col-sm-1 cl-md-1 col-lg-1">
<button type="button" style="display: inline-block;float:right;" class="btn btn-danger" onclick="hideEquipmentDetails()"><i class="fa fa-times"></i></button>
    </section>

Answer 1

問題是因為您在循環中使用html() 。 html()清除所有現有內容並應用您提供的任何內容。 這就是為什么循環中只有最后一項可見的原因。

要解決此問題，請改用append() 。

var content= response.data.filters;
$.each(content,function(i,value){ 
  $('.subSection').append('<section class="col-xs-12 col-sm-2 cl-md-2 col-lg-2"><label class="equipmentHeaderlable">Name</label><label class="equipmentHeaderValues">' + value.name + '</label></section>').appendTo('.EquipmentContent');
});

您可以使用相同的方法append() ，將第二個示例中的內容也添加到DOM中。