在div後插入一個元素

Question

我在如何將生成的元素插入到特定div時遇到問題。欲瞭解更多更清晰的視野我有元素

<div class="mod-attr-holder" id="chosen-product-16"> 
    <div class="attr-holder">...</div> 
    <button class="btn btn-lg btn-addcart btn-bw-orange button-cart" style="width: 90%;" data-id="chosen-product-16">...</button> 
    <a class="btn fontsize18 btn-wishlist text-center">...</a> 
    <div class="attr-holder">...</div> 
    <input type="hidden" id="option-45" name="option[45]" value="126"> 
</div> 

的這個層次現在我有一個點擊後它在那個特定的DIV這是div.class =「ATTR持有人」之後插入一個按鈕。插入之後，它必須是這樣的：

<div class="mod-attr-holder" id="chosen-product-16"> 
    <div class="attr-holder">...</div> 
    <div class="attr-holder">...</div> // this is where it has to insert the newly added element 
    <button class="btn btn-lg btn-addcart btn-bw-orange button-cart" style="width: 90%;" data-id="chosen-product-16">...</button> 
    <a class="btn fontsize18 btn-wishlist text-center">...</a> 
    <div class="attr-holder">...</div> 
    <input type="hidden" id="option-45" name="option[45]" value="126"> 
</div> 

我有這樣的代碼現在：

$('.myelement').on('click', function() { 
    var product_id = $(this).data('parentid'); 
    $('#chosen-product-'+product_id + ' .attr-holder').append(html); 
}); 

Answer 1

嘗試使用insertAfter()。你也應該使用:first，因爲存在兩個名字attr-holder。例如：

$('.myelement').on('click', function() { 
    var product_id = $(this).data('parentid'); 
    var html = '<div class="attr-holder">...</div>'; 
    var $selector = $('#chosen-product-'+product_id + ' .attr-holder:first'); 
    $(html).insertAfter($selector); 
    $(this).off("click"); //To disable simultaneous click 
}); 

Answer 2

您應指定並找到最後或具有ATTR持有者類的第一個元素，然後insertAfter它 例如：

$('.myelement').on('click', function() { 
    var product_id = $(this).data('parentid'); 
    var html = '<div class='attr-holder'>...</div>'; 
    var $selector = $('#chosen-product-'+product_id).children('.attr-holder').last(); 
    $(html).insertAfter($selector); 
}); 

新的HTML標籤會添加在mod-attr-holder等級