Question

您好如何将子DIV附加到父div。

的代码

但我需要DIV格式的输出。

<button id="btn-add-child">Add New Child </button>
<div id="parent">
   <div id="child1">Child 1
      <button id="btn-add-siblings">Add Siblings</button>
      <div>Sibling 1</div>
      <div>Sibling 2</div>
      <div>Sibling 3</div>
   </div>

   <div id="child2">Child 2
      <button id="btn-add-siblings">Add Siblings</button>
      <div>Sibling 1</div>
      <div>Sibling 2</div>
   </div>
</div>

每次单击“添加新子项”按钮时，新项将附加到父项。

每次我点击添加兄弟姐妹按钮，新兄弟会根据父母的孩子添加

Answer 1

我相信这会给你你想要的东西。

动态添加儿童和兄弟姐妹。

var currChild = 1;

function getChildDivHtml(id) {
  return '<div id="child' + currChild + '">Child ' + currChild + '<button class="btn-add-siblings">Add Siblings</button></div>'
}


$(document).ready(function() {
$('#btn-add-child').on('click', function() {
  $('div#parent').append(getChildDivHtml(currChild));
  currChild++;
});

  $('div#parent').on('click', '.btn-add-siblings', function() {
    $(this).parent().append('<div>Sibling</div>');
  });
});

http://jsbin.com/xufogace/1/edit

Answer 2

$("#btn-add-child").click(function() {

    $(parent).append($("<div>New child</div>"));

});

Answer 3

您不应该有多个具有相同ID的元素。使用Class代替按钮

<button class="btn-add-siblings">Add Siblings</button>

$('.btn-add-siblings').on('click', function() {
   $(this).parent().append('<div>Sibling</div>');
});

Answer 4

$('.btn-add-siblings').on('click', function() {
$('#main_div').prepend('<div id="new_div">...</div>');

或

//$('#lastChildDiv').before('<div></div>');
}

JQUERY动态附加父子div

4 个答案: