Insert elements into an element with JQuery

Question

I'm trying to create a ToDo list with JQuery. I'd like to add a checkbox into each <li> element.

My code is:

$('ul').append($('<li>')
               .attr('id', '' + counter + '')
               .addClass('todo')
               .append(text))
       .append('<input type="checkbox" />');

this appends a checkbox after the li element but not in it. How do I insert the checkbox directly into the li element?

Answer 1

what your code did, is to add the checkbox into the ul element instead of the li element.

try:

var $li = $('<li />').attr('id', counter).addClass('todo').append('<input type="checkbox" />').append(text);
$('ul').append($li);

hope that helps.

Answer 2

You need to append the checkbox to the li , not ul .

  $('ul').append($('<li>')
           .attr('id', '' + counter + '')
           .addClass('todo')
           .append(text)
           .append('<input type="checkbox" />'));

Answer 3

$('ul').append(
    $('<li />', {id : counter, 'class' : 'todo'}).append(
        text, $('<input />', {type: 'checkbox'})
    )
)

Answer 4

You can make code much more readable and easier to support. For example like this:

var $li = $('<li>', {
    id: counter,
    className: 'todo',
    text: text
})
.append('<input type="checkbox" />');

$('ul').append($li);

http://jsfiddle.net/7Ter2/