javascript - append或appendTo，如何操作？

我的页面上有一个按钮，当我按下它时，我想附加一个新的div（里面还有两个div，外加一些额外的p标签）。
以下是我想要发生的事情：

<div id="mainDiv" draggable="true"  ondragstart="drag(event)">
  <div class="subDiv1">
    <p class="p1">text</p>
    <p class="p2">text</p>
  </div>
  <div class="subDiv2">
    <p class="p3">text</p>
  </div>
</div>

但我得到的结果是：

<div id="mainDiv" draggable="true"  ondragstart="drag(event)">
  <div class="subDiv1"></div>
  <p class="p1">text</p>
  <p class="p2">text</p>
  <div class="subDiv2"></div>
  <p class="p3">text</p>
</div>

显然下面的代码有问题，但我不知道是什么。我应该使用appendTo而不是append，在这种情况下在哪里？

$(document).ready(function() {
  $("#addButton").click(function() {

    var divToAdd =
    $('<div id="mainDiv" draggable="true"  ondragstart="drag(event)"></div>')
    .append('<div class="subDiv1">')
    .append('<p class="p1">text</p>')
    .append('<p class="p2">text</p></div>')
    .append('<div class="subDiv2">')
    .append('<p class="p3">text</p></div>');

$('.whereToAddDivs').append(divToAdd);

最佳答案

您的需求是嵌套的，但您的代码不是。只需将所需的嵌套与代码匹配即可：

var divToAdd = $('<div id="mainDiv" draggable="true"  ondragstart="drag(event)"></div>')
    .append(
      $('<div class="subDiv1">').append('<p class="p1">text</p>')
                                .append('<p class="p2">text</p>')
    )
    .append(
      $('<div class="subDiv2">').append('<p class="p3">text</p></div>')
    );

    $('.whereToAddDivs').append(divToAdd);

实例：http://jsfiddle.net/SRJHY/
至于最后关于appendTo的小混乱，可以使用它来否定示例代码中的最后一行，将新创建的div附加到容器中，如下所示：

$('<div id="mainDiv" draggable="true"  ondragstart="drag(event)"></div>')
    .append(
      $('<div class="subDiv1">').append('<p class="p1">text</p>')
                                .append('<p class="p2">text</p>')
    )
    .append(
      $('<div class="subDiv2">').append('<p class="p3">text</p></div>')
    )
    .appendTo('.whereToAddDivs');

实例：http://jsfiddle.net/LQJbz/

关于javascript - append或appendTo，如何操作？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17081361/