Question

我正在尝试创建一个动态添加div容器到网页的按钮，目前我正在使用.click（）事件中的代码看起来像这样：

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

现在工作正常。但是，我知道稍后我会在这个div容器中添加更多元素（最多3个或4个），所以我想知道是否有更好，更清洁的方法来做到这一点。否则我认为我的附加声明将开始看起来像这样：

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

这不仅看似错误，而且难以构建。有什么想法吗？

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

Answer 1

使用

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

阅读文档appendTo

DEMO

Updated 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元素附加到容器中，如This Example

所示

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

Answer 4

也许应该写一个特定于你的任务的小函数：'用另一个div中给定id包装x个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'));

将包含子元素的div容器附加到网页？

4 个答案: