Question

我如何将多个子元素添加到父元素？

这就是我想要实现的目标：

<div id = "myDiv">
    <div id = "child1"></div>
    <div id = "child2"></div>
</div>

然而，这会使child2成为child1的孩子：

$("#myDiv").append("div").attr("id", "child1").append("div").attr("id","child2")

有没有办法用点符号添加两个具有不同属性的子项？

编辑：如何将孩子附加到child1？

Answer 1

$("#myDiv").append("<div id='child1'>").append("<div id='child2'>")

Answer 2

另一个

$('#myDiv').append($('<div>', { id: 'child1' })).append($('<div>', { id: 'child2' }))

Answer 3

$("#myDiv").append("div").attr("id", "child1").append("div").attr("id","child2");

将“div”文字添加到myDiv，然后将以前称为“myDiv”的div的id属性更改为“child1”，然后附加更多文字并更改又来了。

更改陈述形式：

$("<div>").attr("id", "child3").add($("<div>").attr("id", "child4")).appendTo("#myDiv");

有了这个，jQuery为它创建一个正确形成的div，assign和id属性，然后添加另一个div和id。请注意，.add()的第二次添加是由于其中的$和在添加到第一个之前添加了id属性而正确形成的，然后它们都会被追加。

注意：您也可以使用上面的模式或为child1的子项执行简单的字符串：

$("<div id='child1A'/><div id='child1B'/>").appendTo("#child1");

值得注意的是，这只会在需要的时候点击DOM一次，你可以建立一个字符串来追加更多的东西 - 仍然只用附加的东西击中DOM一次。

Answer 4

您可以clone() #myDiv添加一个变量，循环到所需的子元素数量，更改属性，然后appendTo #myDiv。我知道的，有点复杂。
也许你最好两次使用append。（在两个单独的行中，没有链接）

哦等等，你可以使用add（这是一个小提琴：http://jsfiddle.net/w4qnk/）

   $elemts = $()
   $elemts = $elemts.add($('<div/>', { 'id': 'child1'}))
   $elemts = $elemts.add($('<div/>', { 'id': 'child2'}))

   $("#myDiv").append($elemts)

D3将多个子节点添加到同一父节点

4 个答案: