Javascript Jquery html在一行中追加前缀

有没有更优雅的方法来实现以下目标。现在，我必须使用许多步骤来生成html标记。多年来一直在使用它，但无法使用尽可能少的步骤使标记正常工作

function prependCheckbox (data) {

        if (!data.element) { return data.text; }

        var $result = $('<div class="checkbox no-margin"><label>');
        var $checkbox = $('<input type="checkbox" />');
        $result.append($checkbox);
        $checkbox.prop('checked', data.element.selected);
        $result.append(data.text + '</label></div>');

        return $result;
    };

函数前置复选框（数据）{
如果（！data.element）{return data.text；}
变量$result=$（''）；
变量$checkbox=$（''）；
$result.append（$checkbox）；
$checkbox.prop（'checked'，data.element.selected）；
$result.append（data.text+“”）；
返回$result；
};

您所做的不正确：jQuery只能构建完整的元素，而不能构建半个元素。因此

var$result=$（''）

正在添加一个空（闭合）标签和

$result.append（data.text+“”）是无效的

如果试图将复选框放在标签内，使用jQuery链接调用的功能，可以执行以下操作：

function prependCheckbox (data) {
    if (!data.element) { return data.text; }
    return $('<div class="checkbox no-margin">').append(
        $('<label>').append(
            $('<input type="checkbox" />').prop('checked', data.element.selected)
        ).append(data.text)
    );
}

函数前置复选框（数据）{
如果（！data.element）{return data.text；}
返回$（''）。追加(
$（''）。追加(
$（''）.prop（'checked'，data.element.selected）
).append（data.text）
);
}
我喜欢可读性和一致性

function prependCheckbox(data) {
    if (!data.element) {
        return data.text;
    }

    var $result   = $('<div />', {
        'class' : 'checkbox no-margin'
    }),
        $label    = $('<label />', {
            text : data.text
    }),
        $checkbox = $('<input />', {
            type    : 'checkbox',
            checked : data.element.selected
    });

    return $result.append( 
        $label.prepend( $checkbox )
    );
}

函数前置复选框（数据）{
if（！data.element）{
返回data.text；
}
变量$result=$（''{
“类”：“复选框无边距”
}),
$label=$（''{
text:data.text
}),
$checkbox=$（“”{
键入：“复选框”，
选中：data.element.selected
});
返回$result.append（
$label.prepend（$checkbox）
);
}

您正在添加一个空标签（不，您以后不会再填充）。@DenysSéguret-正确，我将其更改为更合适的方式，将文本添加到jquery中的元素中。这既好又短。只需从
.append（data.text'）