将带有子元素的div容器附加到网页吗？

Question

我正在尝试创建一个按钮，该按钮将向网页动态添加div容器，目前，我正在使用.click（）事件中的代码执行此操作：

$("<div id = 'some_id'></div>").appendTo("#somecontainer");

目前工作正常。 但是，我知道以后会在这个div容器中添加更多元素（最多3个或4个），因此我想知道是否有更好，更清洁的方法来执行此操作。 否则，我想我的append语句将开始看起来像这样：

$("<div id = 'some_id'><div id = '1'><div id = '2'>...</div></div></div>").appendTo("#somecontainer");

这不仅看起来是错误的，而且很难构造。 有什么想法吗？

编辑：顺便说一下，这些子元素最终将成为所有这些新创建的容器中相同的标准文本/图标，唯一改变的是内部的一些输入文本。

Answer 1

采用

$("#some_id").appendTo("#somecontainer");

阅读文档appendTo

DEMO

更新的演示

Answer 2

如果您想使以后的编辑更轻松，则可以将各种div分解为单独的对象，然后将它们放在一起

使其非常冗长，但易于维护

$('button').click(function() {
    var parent_container = $('<div id="1">Parent Container</div>'),
        section1 = $('<div id="2">Sub Section 1</div>'),
        subsection1 = $('<div id="3">Content within subsection 1</div>'),
        section2 = $('<div id="4">Sub Section 2</div>'),
        subsection2 = $('<div id="5">Content within subsection 2</div>');

    subsection1.appendTo(section1);
    section1.appendTo(parent_container);
    subsection2.appendTo(section2);
    section2.appendTo(parent_container);
    parent_container.appendTo("#somecontainer");
});

http://jsfiddle.net/tzp0fq2q/1/

Answer 3

而是有一种方法可以将DOM元素附加到容器中，如本示例所示

here I have just measured length of elements inside of Container & appending new DOM element based on its length/index

Answer 4

也许应该编写一些特定于您的任务的函数：“将x个具有给定ID的div包装在另一个div中”

您的通话将如下所示：

$makeElement(parentId,[id1,id2,id3]);

您的功能可能是：

$makeElement(pid,arr){
   var i=1,
        $p=$(pid);
    for(i; i<arr.length;i++){
        $p.append($(arr [i]));
    }
    return $p;
}

然后，您可以像这样使用它：

$('body')
    .append($makeElement('mybox','p1','p2'))
    .find('#p1')
    .append($makeElement('subbox','s1'));