Question

i have the following code:

$('#test')
    .append($.map(this.items, function (item, index) {
        return '<li><input type="checkbox" value="' + item.key + '">' item.title + '</li>'
    }).join(''));

but i would like it to look more like this:

$('#test')
    .append($.map(this.items, function (item, index) {
        return $('<li/>').append('<input/>', {type: 'checkbox', value: item.key}).text(item.title)
    });

but this dosent seem to work.
anyone can help?

EDIT
since it seems that the answers cannot apply in the RL situation (i made the code short to explain) here is my actual code:

_RenderCheckbox: function () {
    $('<ul/>')
        .appendTo(this.element)
        .addClass('widget')
        .append($('<input>').attr({ type: 'text', class: 'field', 'data-map': this.element.attr("data-map") }))
        .append($.map(this.items, function (item, index) {
                return '<li><label><input type="checkbox" value="' + item.key + '">' + item.parent + item.title + '</label></li>'
        }).join(''));
},

this is part of a jquery ui widget i am developing.

Answer 1

.text() replaces the contents of your <li>. You’ll have to append/prepend your element:

return $('<li />', {
    text: item.title
}).append($('<input />', {
    type: 'checkbox',
    value: item.key
}));

Also, don’t use join(). Just put this code in $.each:

var $test = $('#test');

$.each(this.items, function(item, index) {
    var $li = $('<li />', {
        text: item.title
    }).appendTo($test);

    $('<input />', {
        type: 'checkbox',
        value: item.key
    }).appendTo($li);
});

And if you prefer huge one-liners:

var $test = $('#test');

$.each(this.items, function(item, index) {
    $('<li />', {
        text: item.title
    }).appendTo($test)
      .append($('<input />', {
        type: 'checkbox',
        value: item.key
    }));
});