Question

我的页面上有一个按钮，当我按下它时，我想添加一个新的div（其中还有2个div，加上一些额外的p-tag）。

以下是我想要发生的事情：

<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);

Answer 1

因为您将它一个接一个地附加到#mainDiv中。您要发生的事情是先将p附加到各自的#subDiv，然后将其附加到#mainDiv。

//your main div
var mainDiv = $('MAIN_DIV_HTML');

//creating subdivs and append to mainDiv
var subDiv1 = $('SUB_DIV1_HTML').appendTo(mainDiv);
var subDiv2 = $('SUB_DIV2_HTML').appendTo(mainDiv);

//the first set of p's appending to subdiv 1
var p1 = $('P1_HTML').appendTo(subDiv1);
var p2 = $('P2_HTML').appendTo(subDiv1);

//the next set of p's to subdiv2
var p3 = $('P3_HTML').appendTo(subDiv2);

//append everything
$('.whereToAddDivs').append(mainDiv);

我还建议你研究模板解决方案而不是这种“html in js”方法。 Mustache和Handlebars应该对初学者有好处。

Answer 2

append将一个DOM节点附加到另一个DOM节点。如果您提供HTML字符串，它会尝试创建一个DOM节点。添加一个没有匹配结束标记的开放DIV标记不会创建一个未关闭的DIV节点，因为没有这样的东西，所以你的第一个附加创建一个完整的DIV。然后，您需要附加。

我通常以这种方式生成节点：

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

Answer 3

为什么要使用几个附加内容？你可以这样做，但为什么不这样做：

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

这更快，更不容易出错。如果您确实需要使用多个附加项，则需要将每个子项附加到正确的父项。您现有的方法会将所有子元素附加到#mainDiv。

Answer 4

尝试

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>'))
;

Answer 5

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

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/

Answer 6

jQuery .append（）函数返回调用.append（）的初始元素，而不是新添加的元素。这意味着，$（）。append（）。append（）。append（）将始终作为$（）元素的附加链。

在你的情况下，你必须这样追加：

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

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

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

追加或追加，以及如何？

6 个答案: