Divに複数の項目を追加する

Question

idがcontrolsのHTML div要素があります。

私は経由して2つのinputフィールドを持つdivを追加しようとしています：しかし、私は2 inputフィールドで終わるしたい

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

：

になり

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"> 
     <input type="number" min="0" max="60" steps="1" value="01:00"> 
    </div> 
</div> 

上記inputs repr日曜日（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

試してみてください。jQueryので

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

、あなた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"のような形式で値を使用することができないとわかりません。 "appendTo"を使用するのが好きなので、入力を追加します。私は2番目のDIVの追加があることを知っている、私は追加部分の残りの部分はこのII 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>