Question

我有一个Div，我想在其中动态添加另一个小Div。但小Div必须在主要Div内。我在里面加了一个小Div。但是如何动态地添加主Div中的所有15个div，我没有得到。另外，小Div的大小是固定的，如果它们的数字比较多，那么Main 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>

这是我的小提琴链接：Fiddle。

Answer 1

您需要根据需要循环多次，创建元素，然后将它们附加到#tables。像这样：

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

Example fiddle

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

Answer 2

您可以在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');
};

举个例子，请看这里：

＆＃13;

$("#btnDynamicDiv").click(function() {
    var 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');
    };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<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>
<input type="button" id="btnDynamicDiv" value ="Add div dynamically"></input>

＆＃13;

Answer 3

尝试这样做（ JSFiddle demo ）

HTML：

<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>

CSS：

#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;
}

JS：

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');
});

如何在Div内部添加Div

3 个答案: