2

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

这是我想要发生的事情：

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

6 回答 6

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”方法。小胡子和车把应该适合初学者。

于 2013-06-13T07:21:03.833 回答
1

append将一个 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');
于 2013-06-13T07:23:01.680 回答
0

为什么要使用多个追加？你可以这样做，但为什么不这样做：

$('<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。

于 2013-06-13T07:22:53.783 回答
0

尝试

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>'))
;
于 2013-06-13T07:22:58.793 回答
0

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

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/

于 2013-06-13T07:23:49.983 回答
0

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);
于 2013-06-13T07:30:27.810 回答