Question

我正在尝试在单击按钮到ul列表时添加li项目。我已设法实现这一目标，但我认为有更好的方法。基本上我想添加一个li项目，里面有一个标签和一个按钮。

这是我的代码：

var li = $('<li></li>');
var label = $('<label></label>');
var button = $('<button class="check">Check</button>')



$addButton.click(function(){

newItem = $('#new-task').val();
label.text(newItem);

$incompleteTasks.append(li);
li.append(label);
li.append(button);   

});

Answer 1

你可以追加它，

Demo（编辑：根据需要在按钮中添加文字）

$("ul").append(
    $( "<li/>" ).append(
        $('<label/>').append(
            $('<button/>', {
                class : 'check',
                text : 'Button'
            })
         )
    )
);

所以在这里，基本上我们首先将li附加到ul，而不是将label附加到最近添加的li，最后我们追加{{1} }}标记到最近创建的button元素，稍后我们使用第二个参数来分隔稍后分配给label标记的属性。

但这仅仅是清洁部分，您可以在附加button标记的同时直接拨打class，但我不建议您这样做。

请注意，您将选择器中的button替换为ul元素的所需id或class。

Answer 2

从jQuery 1.4开始，您可以将属性传递给自闭元素，如下所示：

jQuery('<li/>', {
   text: 'Text might be some <i>html</i>'
}).appendTo('#mySelector');

有关详细信息，请参阅Docs。

此技术允许您向元素添加单个属性：

jQuery('<li/>', {
   id : 'myUniqueID',
   text: 'Text might be some <i>html</i>'       
}).appendTo('#mySelector');

Answer 3

你的逻辑听起来不错......我会做三件事： 1.使用$前缀所有jquery对象然后轻松地重新识别。 2.将你的html保存到将其生成到dom中的函数中 3.利用jQuery的可链接性：

$addButton.click(function () {

    // prefix jQ objects with a $
    // and keep generated HTML inside the function that generate it into the DOM
    var $li = $('<li></li>'),
        $label = $('<label></label>').text($('#new-task').val()),
        $button = $('<button class="check">Check</button>');

    // take advantage of jQuery's chainability
    $li.append($label).append($button).appendTo($incompleteTasks);

});

Answer 4

试试这些：

$('<li>', { class: 'list-item' });
$('<label>');
$('<button>', { class: 'check' });

使用jquery添加li项目的最佳方法

4 个答案: