如何將 append HTML div 與 jquery 和引導列、行類

Question

我對 .append 有一些問題，現在我不太確定這個 function 是如何工作的。 現在我有以下 html：

<?php echo CHtml::hiddenField('counter_row', '2') ?>
<div class="timeslots_from_to row top20">
    <div class="row">
        <label class="col-sm-1 col-form-label">От</label>
        <div class="col-md-4">
            <input type="text" class="timepickerfrom" id="from1">
        </div>
        <label class="col-sm-1 col-form-label">До</label>
        <div class="col-md-4">
            <input type="text" class="timepickerto" id="to1">
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-info btn-circle add-row"><i class="fa fa-plus"></i></button>
        </div>
    </div>
    <div id="insideContainer"></div>
    <h5 id="error_msg"></h5>
</div>

這是一行，有兩個標簽、兩個時間選擇器和用於添加更多行的按鈕。 單擊按鈕添加行時，將執行此腳本：

$(document).on("click", ".add-row", function () {
        var i = $('#counter_row').val();
        console.log('counter_row ' + i);
        $("#error_msg").html("");

        if($('#from'+(i-1)).val() >= $('#to'+(i-1)).val()) {
            $("#error_msg").html("Грешка");
          return false;
        } 
        
        $("<div />", { "class":"row" })
            .append("<div class='col-md-1>")
            .append("<label> От </label>")
            .append("</div>")
            .append("<div class='col-md-1>")
            .append($("<input />", { type: "text", id:"from"+i, class:"timepickerfrom" }))
            .append("</div>")
            .append("<div class='col-md-1>")
            .append("<label> До </label>")
            .append("</div>")
            .append("<div class='col-md-4>")
            .append($("<input />", { type: "text", id:"to"+i, class:"timepickerto" }))
            .append("</div>")
            .appendTo("#insideContainer");

        $('#from'+i).val($('#to' + (i-1)).val());   

        i++;
        $('#counter_row').val(i);

        $('input.timepickerfrom').timepicker({
            timeFormat: 'H:mm',
            interval: 15,
            minTime: '8',
            maxTime: '22:15',
            startTime: '08:00',
            dynamic: false,
            dropdown: true,
            scrollbar: true
        });
        $('input.timepickerto').timepicker({
            timeFormat: 'H:mm',
            interval: 15,
            minTime: '08:15',
            maxTime: '22:30',
            startTime: '08:15',
            dynamic: false,
            dropdown: true,
            scrollbar: true
        });
    });

但不幸的是並沒有返回想要的結果。 我想添加像 html 部分中已經存在的第一行一樣的行（沒有按鈕），但它看起來像這樣：

你知道我做錯了什么以及為什么這個腳本不包含引導程序類的 append 嗎？

為了清楚起見，我還將附上返回代碼在瀏覽器頁面檢查中的外觀：

如果您注意到我做錯了什么，我會很高興。

Answer 1

單獨構建每一列，然后將它們 append 到該行：

const $labelCol1 = $('<div class="col-md-1"></div>').append('<label> От </label>')
const $labelCol2 = $('<div class="col-md-1"></div>').append('<label> До </label>')
const $inputCol1 = $('<div class="col-md-4"></div>').append($("<input />", { type: "text", id:"from"+i, class:"timepickerfrom" }))
const $inputCol2 = $('<div class="col-md-4"></div>').append($("<input />", { type: "text", id:"to"+i, class:"timepickerto" }))

$('<div class="row"></div>')
   .append($labelCol1)
   .append($inputCol1)
   .append($labelCol2)
   .append($inputCol2)
   // Because of the missing button you're 2 columns short. Add a placeholder.
   .append('<div class="col-md-2" />')
   .appendTo("#insideContainer");