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.class =＆＃34; attr-holder＆＃34;之后的特定div中。插入后，它必须如下所示：

<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-holder 类的最后一个或第一个元素，然后 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 层次结构

中的选择器之后

在div之后插入一个元素

2 个答案: