1

How would I go about adding multiple child elements to a parent?

This is what I would like to achieve :

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

This would, however, make child2 a child of child1:

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

Is there any way of adding two children with different attributes using dot notation?

EDIT: How about also appending a child to child1?

4

4 回答 4

3

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

于 2013-06-05T18:27:08.280 回答
1 
$("#myDiv").append("div").attr("id", "child1").append("div").attr("id","child2");

将“div”文本附加到 myDiv，然后将以前称为“myDiv”的 div的 id 属性更改为“child1”，然后附加更多文本并再次更改 id。

更改您的陈述形式：

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

有了这个，jQuery 创建了一个格式正确的 div，为其分配和 id 属性，然后添加另一个 div 和 id。请注意，第二个添加 with.add()是正确形成的，因为$里面有 id 属性在添加到第一个之前添加，然后它们都被附加。

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

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

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

于 2013-06-05T19:51:49.843 回答
1

还有一个

$('#myDiv').append($('<div>', { id: 'child1' })).append($('<div>', { id: 'child2' }))
于 2013-06-05T18:50:26.220 回答
0
  • 您可以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)
于 2013-06-05T18:44:11.717 回答