Javascript 追加或追加，以及如何追加？

我在我的页面上有一个按钮，当我按下它时，我想附加一个新的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);

$（文档）.ready（函数（）{
$（“#添加按钮”）。单击（函数（）{
变量divToAdd=
$('')
.append（“”）
.append（“
文本
”）
.append（“
text
”）
.append（“”）
.append（“
text
”）；
$（'whereToAddDivs'）。追加（divToAdd）；

因为您要将它一个接一个地附加到

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

---

我还建议您研究模板化解决方案，而不是这种“js中的html”方法。这对初学者来说应该很好。

为什么要使用几个附录？您可以这样做，但为什么不这样做：

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

$（“”）
.append（'p class=“p1”>text
text
text
）；

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

请尝试

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

var divToAdd=
$('')
.append（$（''）.append（'
text
'）。append（'
text
'））
.append（$（''）.append（'
text
'））
;

append

将一个DOM节点追加到另一个DOM节点。如果提供HTML字符串，它会尝试从中创建一个DOM节点。追加一个打开的DIV标记而不匹配end标记不会创建一个未关闭的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');

$（“”，{id:'mainDiv'，draggable:'true'，ondragstart:'drag（event）'））
.append（$（''，{'class'：'subDiv1'}）
.append（$（'
'，{'class'：'p1'，text:'text'}））
.append（$（'
'，{'class'：'p2'，text:'text'}））
)
.append（$（''，{'class'：'subDiv2'}）
.append（$（'
'，{'class'：'p3'，text:'text'}））
)
.appendTo（“.whereToAddDivs”）；

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

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

示例：

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

$（文档）.ready（函数（）{
$（“#添加按钮”）。单击（函数（）{
变量divToAdd=
$('')
.append（$（''）.append（'
text
'）。append（'
text
'））
.append（$（''）.append（'
text
）；
$（'whereToAddDivs'）。追加（divToAdd）；

“我应该使用appendTo而不是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);