如何将列表项添加到现有的无序列表中?


548

我有看起来像这样的代码:

<div id="header">
    <ul class="tabs">
        <li><a href="/user/view"><span class="tab">Profile</span></a></li>
        <li><a href="/user/edit"><span class="tab">Edit</span></a></li>
    </ul>
</div>

我想使用jQuery将以下内容添加到列表中:

<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>

我尝试了这个:

$("#content ul li:last").append("<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>");

但是,增加了新的li 最后一次li,以后不是(在结束标记之前)。添加此内容的最佳方法是li什么?

Answers:


815

这样可以做到:

$("#header ul").append('<li><a href="https://stackoverflow.com/user/messages"><span class="tab">Message Center</span></a></li>');

两件事情:

  • 您可以将追加<li>到其<ul>本身。
  • 您需要使用与HTML中使用的引号相反的类型。因此,由于您在属性中使用了双引号,因此在代码中用单引号引起来。

6
它不是'#header'而不是'#content'吗?
迪帕克

15
只是作为旁注,如果您想添加为第一个元素而不是最后一个元素,可以使用prepend而不是append
Thomas

517

您还可以通过更多的“对象方式”进行操作,并且仍然易于阅读:

$('#content ul').append(
    $('<li>').append(
        $('<a>').attr('href','/user/messages').append(
            $('<span>').attr('class', 'tab').append("Message center")
)));    

然后,您不必使用引号进行斗争,而必须保留括号括号:)


您的方法不会启动新标签但不会关闭它们吗?
埃弗顿2012年

1
不,jquery使用DOM操作创建标签,因此它仅需知道其名称
Danubian Sailor 2012年

我喜欢这个。我不喜欢用绳子和报价搞乱:) BTW:另一个选项是stackoverflow.com/a/4673436/112000
托马什Fejfar

2
到目前为止,这是更可取的方式,即使用更面向对象的方式。
2013年

有没有可以同时追加多个?
tyan

51

如何使用“之后”而不是“追加”。

$("#content ul li:last").after('<li><a href="https://stackoverflow.com/user/messages"><span class="tab">Message Center</span></a></li>');

“ .after()”可以在匹配的元素集中的每个元素之后插入由参数指定的内容。


3
谢谢,这对我有帮助。要插入列表的中间,您需要使用beforeafter
帕特里克·费雪

1
这与
@Danubian_Sailor

50

如果只是在其中添加文本li,则可以使用:

 $("#ul").append($("<li>").text("Some Text."));

20

jQuery带有以下选项,在这种情况下可以满足您的需求:

append用于div在选择器中指定的父级末尾添加元素:

$('ul.tabs').append('<li>An element</li>');

prepend用于div在选择器中指定的父项的顶部/开头添加元素:

$('ul.tabs').prepend('<li>An element</li>');

insertAfter使您可以在指定的元素之后插入选择的元素。然后,您创建的元素将被放置在DOM中,位于指定的选择器结束标记之后:

$('<li>An element</li>').insertAfter('ul.tabs>li:last');
will result in:
<li><a href="/user/edit"><span class="tab">Edit</span></a></li>
<li>An element</li>

insertBefore 将执行与上述相反的操作:

$('<li>An element</li>').insertBefore('ul.tabs>li:last');
will result in:
<li>An element</li>
<li><a href="/user/edit"><span class="tab">Edit</span></a></li>

16

您应该附加到容器,而不是最后一个元素:

$("#content ul").append('<li><a href="https://stackoverflow.com/user/messages"><span class="tab">Message Center</span></a></li>');

追加()函数应该可能已经被调用的add() jQuery中,因为它有时混淆人民。您可能会认为它会在给定元素之后附加一些内容,而实际上会将添加到该元素中。




6
$("#content ul").append('<li><a href="https://stackoverflow.com/user/messages"><span class="tab">Message Center</span></a></li>');

这是有关代码可读性(博客的无耻插件)的一些反馈。 http://coderob.wordpress.com/2012/02/02/code-readability

考虑将新元素的声明与将其添加到UL的操作分开。看起来像这样:

var tabSpan = $('<span/>', {
    html: 'Message Center'
});
var messageCenterAnchor = $('<a/>', {
    href='/user/messages',
    html: tabSpan
});
var newListItem = $('<li/>', {
    html: messageCenterAnchor,
    "id": "myIDGoesHere"
});    // NOTE: you have to put quotes around "id" for IE..

$("content ul").append(newListItem);

快乐的编码:)


var newListItem = $('<li />',{html:messageCenterAnchor}); 我如何获得li和id?
jmogera 2012年

@jmogera,您要设置ID吗?如果是这样,您可以在{}内执行此操作。我更新了上面的代码:)
不可否认的是

3

这是最简单的方法

list.push($('<li>', {text: blocks[i] }));
$('ul').append(list);

数组中的块。并且您需要遍历数组。



By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.