Question

我有一个ID为controls的HTML div元素。

我尝试通过以下方式添加div个input字段：

this.controls = controlBtns
    .append('div')
    .classed({'time-container': true})
    .append('input')
    .attr({type: 'number', min: '0', max: '24', step:'1', value:'00', 'disabled': 'disabled'});

结果是：

<div id="controls">
    <div class="time-container">
        <input type="number" min="0" max="24" steps="1" value="01:00">
    </div>
</div>

但是，我想最终得到2 input字段，所以：

<div id="controls">
    <div class="time-container">
        <input type="number" min="0" max="24" steps="1" value="01:00">
        <input type="number" min="0" max="60" steps="1" value="01:00">
    </div>
</div>

上述inputs代表小时（24）和分钟（60）。但是，当我尝试：

this.controls = controlBtns
    .append('div')
    .classed({'time-container': true})
    .append('input')
    .attr({type: 'number', min: '0', max: '24', step:'1', value:'00', 'disabled': 'disabled'})
    .append('input')
    .attr({type: 'number', min: '0', max: '60', step:'1', value:'00', 'disabled': 'disabled'});

结果是：

<div id="controls">
    <div class="time-container">
        <input type="number" min="0" max="24" steps="1" value="01:00">
    </div>
    <input type="number" min="0" max="60" steps="1" value="01:00">
</div>

我如何导致：

<div id="controls">
    <div class="time-container">
        <input type="number" min="0" max="24" steps="1" value="01:00">
        <input type="number" min="0" max="60" steps="1" value="01:00">
    </div>
</div>

Answer 1

尝试：

var timeContainer = controlBtns
  .append('div')
  .classed({'time-container': true});
timeContainer
  .append('input')
  .attr({type: 'number', min: '0', max: '24', step:'1', value:'00', 'disabled': 'disabled'});
timeContainer
  .append('input')
  .attr({type: 'number', min: '0', max: '60', step:'1', value:'00', 'disabled': 'disabled'});

this.controls = timeContainer;

Answer 2

在jQuery中，您可以附加整个HTML代码段。所以，你可以这样做

$('#controls").append('<div class="time-container"><input type="number" min="0" max="24" steps="1" value="01:00"><input type="number" min="0" max="60" steps="1" value="01:00"></div>');

Answer 3

我会做这样的事情：

$("#controls").append('<div class="time-container"></div>');
var timeContainer = $("#controls").find('.time-container');
timeContainer
    .append('<input />')
    .find('input')
    .last()
    .attr({type: 'number', min: '0', max: '24', step:'1', value:'00', 'disabled': 'disabled'});
timeContainer
    .append('<input />')
    .find('input')
    .last()
    .attr({type: 'number', min: '0', max: '60', step:'1', value:'00', 'disabled': 'disabled'});

这应该可以正常工作。

Answer 4

好吧，如果输入是数字I，我不确定我是否可以使用类似＆＃34; 01：00＆＃34;的格式。只有＆＃34; 1＆＃34;对于附加部分，我更喜欢使用＆＃34; appendTo＆＃34;所以我可以设置附加输入的位置。我看到有第二个DIV的附加，我认为附加部分的其余部分应该在这个II div中。

＆＃13;

controlBtns = $('#controls');

$('<div>').attr({
'id': 'numbersWrapper'
}).appendTo( controlBtns );

$('<input>').attr({
'type':'number',
'min':'0',
'max':'24',
'steps':'1',
'value':'1',
'id': 'hrs'
}).appendTo('#numbersWrapper' );

$('<input>').attr({
'type':'number',
'min':'0',
'max':'60',
'steps':'1',
'value':'1',
'id': 'mins'
}).appendTo( '#numbersWrapper' );

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="controls"></div>

＆＃13;

将多个项目添加到Div

4 个答案: