Получить ребенка от детей jquery

Question

Мне нужно создать следующую форму динамически, используя jquery.

<form> 
     <div class="col-xs-12"> 
      <div class="col-xs-3"> 
       <label for="startTime">Start Time</label> 
       <input id="startTime" name="startTime" style="margin-bottom: 10px" class="form-control" type="text"> 
      </div> 
      <div class="col-xs-3"> 
       <label for="endTime">End Time</label> 
       <input id="endTime" name="endTime" style="margin-bottom: 10px" class="form-control" type="text"> 
       </div> 
     </div> 
</form> 

Вот как я попробовал.

$('#addBodyContainer').append('<form id = "addDataForm" ></form>'); 
     var form = $('#addBodyContainer').children(); 
     form.append('<div class = "col-xs-12" ></div>'); 

var col12Time = form.children(); 
col12Time.append('<div class = "col-xs-3" ></div>'); 
var col3StartTime = col12Time.children(); 
col3StartTime.append(
     "<label for=\"startTime\">"+head[0]+"</label>" + 
     "<input id=\"startTime\" name=\"startTime\" style=\"margin-bottom: 10px\" class=\"form-control\" type=\"text\" />" 
      ); 
var col12Time2 = form.children(); 
col12Time.append('<div class = "col-xs-3" ></div>'); 
var col3EndTime = col12Time.children(); 
col3EndTime.append(
     "<label for=\"endTime\">"+head[1]+"</label>" + 
     "<input id=\"endTime\" name=\"endTime\" style=\"margin-bottom: 10px\" class=\"form-control\" type=\"text\">" 
      ); 

Когда я создаю поле конечного времени. Он появляется дважды в форме. Я думаю, что проблема возникает, когда я звоню form.children() дважды. Как я могу решить эту проблему?

Answer 1

Вы добавляете его всем детям, вам нужно будет выбрать последний.

var col12Time = form.children().last(); 

Answer 2

Вы можете создать его, как этот

var container = $('#addBodyContainer'); 
var tmp='<form>'+ 
    '<div class="col-xs-12">'+ 
    '<div class="col-xs-3">'+ 
    '<label for="startTime">Start Time</label>'+ 
    '<input id="startTime" name="startTime" style="margin-bottom: 10px" class="form-control" type="text"/>'+ 
    '</div>'+ 
    '<div class="col-xs-3">'+ 
    '<label for="endTime">End Time</label>'+ 
    '<input id="endTime" name="endTime" style="margin-bottom: 10px" class="form-control" type="text"/>'+ 
    '</div>'+ 
    '</div>'+ 
    '</form>'; 
container.append(tmp);