Добавление нескольких элементов в div

Question

У меня есть элемент div HTML с идентификатором controls.

Я пытаюсь добавить в div с 2 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 esent часов (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

Try:

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

Ну, если ввод является номером, я не уверен, что могу использовать значение с форматом типа «01:00» только «1», а для части добавления я предпочитаю использовать «appendTo», чтобы я мог установить, где для добавления ввода. Я вижу, что есть добавка второй DIV, я думаю, что остальная часть append должна быть внутри этого div.

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

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