D3将多个孩子添加到同一个父母答案

【问题标题】：D3 adding multiple children to the same parentD3将多个孩子添加到同一个父母
【发布时间】：2013-06-05 18:23:14
【问题描述】：

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

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

<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 怎么样？

【问题讨论】：

标签： javascript jquery html web-applications d3.js

【解决方案1】：

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

【讨论】：

【解决方案2】：

还有一个

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

【讨论】：

【解决方案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，为其分配 id 属性，然后添加另一个带有 id 的 div。请注意，.add() 的第二个添加是正确形成的，因为里面有 $，并且在添加到第一个之前添加了 id 属性，然后它们都被附加了。

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

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

值得注意的是，这只会命中 DOM 一次，这是所需的，您也可以构建字符串以追加更多内容 - 仍然只通过该追加命中 DOM 一次。

【讨论】：

【解决方案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)

【讨论】：