Javascript 如何在Div中动态添加Div

我有一个Div，我想在其中动态添加另一个小Div。但小Div的严格要求是在主Div里面。我在里面添加了一个小Div。但是如何在主div中动态添加所有15个div，我不知道。此外，小Div的大小是固定的，如果它们的数量更多，比如说20，那么主Div应该有水平滚动条

以下是使用的HTML：

 <div id="tables" style="width:740px; height:50px; border:1px solid;margin-left:180px;">

 <div id ="1" style="border:1px solid; height:44px; width:50px; margin-left:2px; margin-top:2px; margin-bottom:2px;">1</div>

 </div>

---

这是我的小提琴链接：

您需要根据需要多次循环，创建元素，然后将它们附加到表中。大概是这样的：

var $tables = $('#tables');
for (var i = 1; i <= 15; i++) {
    $('<div />', { class: 'inner', text: i }).appendTo($tables);
};

---

如果需要，您可以重新添加id属性，但我建议不要使用增量id属性，因为它们只会导致维护问题。另外，为了更好地分离关注点，我更改了样式以使用实际的CSS类。

您可以在jQuery中使用以下代码来附加div：

smallDivWidth =  (740 / 15);

for (var i = 1; i <= 15; i++) {
    $('#tables').append('<div style="border:1px solid; height:44px;float:left; margin- left:2px; margin-top:2px; margin-bottom:2px;">1</div>');
$('#tables').children().css('width',(smallDivWidth-4)+'px');
};

作为示例，请参见此处：

$btnDynamicDiv.clickfunction{ var smallDivWidth=740/15； 对于var i=1；i尝试如下

HTML:

JS:

---

你什么都没试过fiddle@Jai这在HTML5中现在是有效的。请避免使用内联样式，而是使用css类，这样您的代码更可读jQuery@RoryMcCrossan我知道，但需要从普里蒂什库马尔那里知道。@Rorymcrossan nevermind收到了，非常感谢！谢谢你的回答。你能告诉我怎么做吗w将动态div水平放置在主div内，而不是竖直放置，如fiddle所示。我希望Rory将该工作留给您：@Pritishkumar使用CSS，display:inline block或float:left。@RoryMcCrossan谢谢，我尝试了您的CSS，但前5个div进入父div内，其余的都在新行中，而我正在尝试o使用水平滚动条将其添加到同一个父Div中。您应该针对此问题开始一个新问题，因为它与CSS相关，而不是jQuery或javascript。

<div id="tables">
    <div class="inner" id="innder-1">1</div>
</div>

<div class="inner inner-template"></div>

<br>
<button id="add-btn">Add inner</button>

#tables {
    width:200px; 
    height:50px; 
    border:1px solid;
    white-space: nowrap;
    overflow-x: auto;
}

.inner {
    border:1px solid;
    height:44px;
    width:50px;
    margin-left:2px;
    margin-top:2px;
    margin-bottom:2px;
    display: inline-block;
    vertical-align: top;
    white-space: howrap;
}

.inner-template {
   display: none;
}

var $template = $('.inner-template');

$('#add-btn').on('click', function() {
    var currentID = $('#tables .inner').length + 1;
    var $inner = $template
        .clone()
        .removeClass('inner-template')
        .attr('id', 'inner-' + currentID)
        .text(currentID)
        .appendTo('#tables');
});