Javascript 难以在正确位置动态插入复选框

当我想要创建动态复选框时，我在将它们插入正确位置时遇到问题。我想把它们放在输入字段下面，而不是图像下面。我现在真的不知道如何以我描述的方式放置它们

HTML:

说明：


信用卡到期日：


要做的事情：

创建复选框：



评论：

JQuery：

$(document).ready(function () {
    $('#btnSaveCheckBox').click(function () {
        addCheckbox($('#checkBoxName').val());
        $('#checkBoxName').val("");
    });

    $(function () {
        $("#progressbar").progressbar({
            value: 0,
            max: 100
        });

    });
});

function addCheckbox(name) {
    var container = $('#modalDialog');
    var inputs = container.find('input');
    var id = inputs.length + 1;

    $('<input />', {
        type: 'checkbox',
        id: 'cb' + id,
        value: name
    }).appendTo(container);
    $('<label />', {
        'for': 'cb' + id,
        text: name
    }).appendTo(container);
    $('<br/>').appendTo(container);
}

$（文档）.ready（函数（）{
$（'#btnSaveCheckBox'）。单击（函数（）{
addCheckbox（$（'#checkBoxName'）.val（）；
$（'#checkBoxName'）.val（“”）；
});
$（函数（）{
$（“#progressbar”）.progressbar({
值：0，
最高：100
});
});
});
函数addCheckbox（名称）{
变量容器=$（“#modalDialog”）；
var inputs=container.find（'input'）；
变量id=输入。长度+1；
$('', {
键入：“复选框”，
id:'cb'+id，
值：name
}).附在（容器）上；
$('', {
‘for’：‘cb’+id，
文本：名称
}).附在（容器）上；
$（'
'）。附加到（容器）；
}

这是因为您的代码将复选框附加到

modalDialog

元素，该元素是您看到的所有项目的容器，因此它们会添加到其他所有项目之后

只需添加一个新元素（例如称为

复选框

），将其放置在您希望复选框出现的位置，并将复选框附加到此元素，即la:

HTML

说明：


信用卡到期日：


要做的事情：

创建复选框：



评论：

jQuery

$(document).ready(function () {
    $('#btnSaveCheckBox').click(function () {
        addCheckbox($('#checkBoxName').val());
        $('#checkBoxName').val("");
    });

    $(function () {
        $("#progressbar").progressbar({
            value: 0,
            max: 100
        });

    });
});

function addCheckbox(name) {
    var container = $('#checkboxes');
    var inputs = container.find('input');
    var id = inputs.length + 1;

    $('<input />', {
        type: 'checkbox',
        id: 'cb' + id,
        value: name
    }).appendTo(container);
    $('<label />', {
        'for': 'cb' + id,
        text: name
    }).appendTo(container);
    $('<br/>').appendTo(container);
}

$（文档）.ready（函数（）{
$（'#btnSaveCheckBox'）。单击（函数（）{
addCheckbox（$（'#checkBoxName'）.val（）；
$（'#checkBoxName'）.val（“”）；
});
$（函数（）{
$（“#progressbar”）.progressbar({
值：0，
最高：100
});
});
});
函数addCheckbox（名称）{
变量容器=$（“#复选框”）；
var inputs=container.find（'input'）；
变量id=输入。长度+1；
$('', {
键入：“复选框”，
id:'cb'+id，
值：name
}).附在（容器）上；
$('', {
‘for’：‘cb’+id，
文本：名称
}).附在（容器）上；
$（'
'）。附加到（容器）；
}

<div id="modalDialog">
    <form>
        <p>Description:</p>
        <input type="text" id="customTextBox" style="width: 100%; font-size: 120%;" />
        <hr class="fancy-line" />
        <p>Card due Date:</p>
        <input type="text" id="datepicker" style="width: 15%" />
        <input type="button" id="Getbtn" value="Get value" />
        <hr class="fancy-line" />
        <p>Things To Do:</p>
        <div id="progressbar">
            <div id="progress">
                <div id="pbaranim"></div>
            </div>
        </div>
        <p>Create CheckBox:</p>
        <input type="text" id="checkBoxName" />
        <input type="button" id="btnSaveCheckBox" value="_Ok" />
        <div id='checkboxes'></div>
        <hr class="fancy-line" />
        <p>
            <img src="/Pages/Images/comment.png" width="40" height="40" style="display: inline-block" />Comments:</p>
    </form>
</div>

$(document).ready(function () {
    $('#btnSaveCheckBox').click(function () {
        addCheckbox($('#checkBoxName').val());
        $('#checkBoxName').val("");
    });

    $(function () {
        $("#progressbar").progressbar({
            value: 0,
            max: 100
        });

    });
});

function addCheckbox(name) {
    var container = $('#checkboxes');
    var inputs = container.find('input');
    var id = inputs.length + 1;

    $('<input />', {
        type: 'checkbox',
        id: 'cb' + id,
        value: name
    }).appendTo(container);
    $('<label />', {
        'for': 'cb' + id,
        text: name
    }).appendTo(container);
    $('<br/>').appendTo(container);
}