如何将 HTML div 附加到 jquery 和 bootstrap 列，行类

Question

我在使用 .append 时遇到了一些问题，现在我不太确定这个函数是如何工作的。现在我有以下 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>

这是一行，有两个标签、两个时间选择器和用于添加更多行的按钮。单击 add-row 按钮时，正在执行此脚本：

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

可惜并不是return想要的结果。我想添加已经在 html 部分（没有按钮）中的第一行，但它看起来像这样：

你知道我做错了什么以及为什么这个脚本没有附加 bootstrap 类吗？

为了清楚起见，我还将附上 return 代码在检查浏览器页面时的样子：

如果您发现我做错了什么，我会很高兴。

Answer 1

单独构建每一列，然后将它们追加到行中：

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

如何将 HTML div 附加到 jquery 和 bootstrap 列，行类

How to append HTML div with jquery and bootstrap col, row classes

html

javascript

jquery

bootstrap-4

如何将 HTML div 附加到 jquery 和 bootstrap 列，行 类

How to append HTML div with jquery and bootstrap col, row classes

html

javascript

jquery

bootstrap-4

如何将 HTML div 附加到 jquery 和 bootstrap 列，行类