使用JQuery將元素插入元素

Question

我正在嘗試使用JQuery創建待辦事項列表。 我想在每個<li>元素中添加一個復選框。

我的代碼是：

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

這會在li元素之后但不在其中添加一個復選框。 如何將復選框直接插入li元素？

Answer 1

您的代碼所做的是將復選框添加到ul元素而不是li元素中。

嘗試：

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

希望能有所幫助。

Answer 2

您需要將復選框附加到li而不是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

您可以使代碼更具可讀性，更易於支持。 例如這樣：

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

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

http://jsfiddle.net/7Ter2/