动态构建复选框UI：如何将文本置于复选框右侧？

我尝试通过JS动态构建包含Label和Checkbox的UI，当前代码如下：

function renderCheckbox(ui, uiField, labelText, idField, nameOnForm){
    let id = abp.helper.getUniqueElementId();
    let container  = $('<div class="form-group col-lg-3 col-md-3 col-sm-6">');
    let label = $('<label class="m-checkbox mt-35px">').attr('for', idField).text(labelText);
    let checkbox = $('<input type="checkbox" class="filter">').attr('name', nameOnForm).attr('id', idField);
    checkbox.appendTo(label);
    let result = container.append(label);

    return result;
}

期望生成的HTML结构：

<div class="form-group col-lg-3 col-md-3 col-sm-6">
    <label for="HideVerifiedTickets" class="m-checkbox mt-35px">
        <input id="HideVerifiedTickets" class="filter" type="checkbox" name="HideVerifiedTickets" />
        HideVerifiedTickets
        <span></span>
    </label>
</div>

但实际生成的HTML中，文本出现在Checkbox左侧，不符合预期，请问如何将文本移至Checkbox右侧？

解决方案 #

问题出在元素添加顺序上：你先给label设置了文本内容，再把checkbox追加进去，导致文本在Checkbox前面。调整元素添加顺序，同时补上需要的<span>标签即可：

修改后的JS代码：

function renderCheckbox(ui, uiField, labelText, idField, nameOnForm){
    let container = $('<div class="form-group col-lg-3 col-md-3 col-sm-6">');
    let label = $('<label class="m-checkbox mt-35px">').attr('for', idField);
    let checkbox = $('<input type="checkbox" class="filter">').attr('name', nameOnForm).attr('id', idField);
    
    // 按目标结构顺序添加元素
    label.append(checkbox);
    label.append(document.createTextNode(labelText));
    label.append('<span></span>');
    
    container.append(label);
    return container;
}

关键改动说明：

• 不再提前用.text()设置label内容，而是先将Checkbox插入label
• 通过document.createTextNode()添加文本节点，保证文本紧跟在Checkbox之后
• 补上目标结构中需要的<span>标签，确保UI样式匹配预期

内容的提问来源于stack exchange，提问作者Eugene Sukh