如何附加 <li> 到一个 <ul> 并在上设置css <li> 在同一时间与jQuery

Question

以下设置了要添加<li>的<ul>的颜色。 我希望设置<li>的颜色，而不是附加颜色：

$('.test').append(
    '<li class="asdf" data-blerg="ssdkf">TESTESETSETSERT</li>').css('color', 'blue');

Answer 1

您可以尝试使用.appendTo（）代替：

$('<li class="asdf" data-blerg="ssdkf">TESTESETSETSERT</li>')
   .css('color', 'blue').appendTo('.test');

演示

您也可以像这样继续使用append() ：

$('.test').append($('<li class="asdf" data-blerg="ssdkf">TESTESETSETSERT</li>')
                .css('color', 'blue'));

Answer 2

您可以像这样使用它：

var el = $('<li class="asdf" data-blerg="ssdkf">TESTESETSETSERT</li>');
$('.test').append($(el).css('color', 'blue'));

Answer 3

我更喜欢这种方式，因为如果您要添加多个元素属性，发现它会更整洁，我认为它也会减少dom的使用量。

var listItem = $('<li/>', {
    html: 'TESTESETSETSERT',
    class : 'asdf',
    'data-blerg' : 'ssdkf'
});
$('.test').append(listItem);

Answer 4

如果添加新元素，则这是DOM的最后一个子元素。 该方法追加返回容器，您需要让他们childrem，获取最后一个孩子，然后应用css

$('.test').append(
    '<li class="asdf" data-blerg="ssdkf">TESTESETSETSERT</li>').children().last().css('color', 'blue');