Appending Multiple Items To Div

Question

I have a HTML div element with an id of controls .

I am trying to append a div with a 2 input fields via:

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

Which results in:

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

However, i want to end up with 2 input field so:

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

The above inputs represent hours (24) and minutes (60). However, when i try:

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

The result is:

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

How can i result in:

<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

In jQuery, you can append entire HTML snippet. So, you can do this

$('#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

I would do something like this:

$("#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'});

This should work just fine.

Answer 4

Well, if the input is number I'm not sure I could use value with a format like "01:00" only "1" and for the append part I prefer to use "appendTo" so I could set where to append the input. I see there is an append of second DIV, I think the rest of the append part should be inside this 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>