如何向现有无序列表中添加列表项

Question

我有这样的代码：

<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，而不是在其后面添加，那么最好的方法是什么呢？

- Eileen

---

https://dev59.com/8HM_5IYBdhLWcg3w-4Zg#70523100 - Billu

Answer 1

这样做就可以了：

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

两件事：

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

- Paolo Bergantino

---

顺带一提，如果您想将元素添加为第一个而不是最后一个，则可以使用“prepend”而不是“append”。 - Thomas

Answer 2

您也可以以更“面向对象”的方式完成，同时仍然易读：

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

你不必再为引号而苦恼，但是你必须要注意大括号 :)

- Danubian Sailor

---

你的方法不是会开始新的标签而不是关闭它们吗？ - everton

不，jQuery使用DOM操作创建标签，因此它只需要知道标签的名称。 - Danubian Sailor

我喜欢这个。我讨厌处理字符串和引号 :) 顺便说一下：另一个选项是https://dev59.com/YXRB5IYBdhLWcg3weXOX#4673436 - Tomáš Fejfar

这绝对是更可取的方式，也就是使用更面向对象的方式。 - Will

您可以通过使用$('<span>').text(unsafe_user_input)而不是直接使用append("Message center")来转义用户输入中的任何特殊HTML字符。 - famzah

您可以通过使用$('<span>').text(unsafe_user_input)而不是直接使用append("Message center")来避免在用户输入中转义任何特殊的HTML字符。 - undefined

Answer 3

如果你只是在那个 li 中添加文本，你可以使用:

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

- kravits88

---

在尝试了所有失败的解决方案后，这个方法对我非常有效。 - TarangP

Answer 4

使用 "after" 代替 "append" 怎么样？

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

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

- satomacoto

---

谢谢，这对我很有帮助。要在列表中间插入元素，需使用 before 或 after。 - Patrick Fisher

这个与@Danubian_Sailor的答案结合起来对我很有帮助。 - bkwdesign

Answer 5

以下是jQuery的选项，它们可以满足您在这种情况下的需求：

append用于将元素添加到选择器指定的父div的末尾：

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

prepend 用于在选择器指定的父级 div 的顶部/开头添加一个元素：

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

insertAfter函数允许您将所选元素插入在指定元素之后。 您创建的元素将被放置在指定选择器的关闭标记后面：

$('<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>

- Ole Haugset

Answer 6

你应该追加到容器，而不是最后一个元素：

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

append() 函数应该在 jQuery 中被称为 add()，因为它有时会让人们感到困惑。你会认为它会将某些东西添加到给定的元素之后，但实际上它是将其添加到元素中。

- Philippe Leybaert

Answer 7

使用：

$("#content ul").append('<li><a href="/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);

- undeniablyrob

---

var newListItem = $('<li/>', { html: messageCenterAnchor });我该如何获取 li 和 id？ - jmogera

@jmogera，你是想设置ID吗？如果是的话，你可以在 { } 中直接设置。我已经更新了上面的代码 :) - undeniablyrob

链接已经失效: "糟糕！该页面无法找到。" - Peter Mortensen

Answer 8

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

- Evan Meagher

---

需要解释一下。例如，用户“Dipak”写道：“应该是‘#header’而不是‘#content’吧？” - Peter Mortensen

Answer 9

代替

$("#header ul li:last")

尝试

$("#header ul")

- Adrian Godong

Answer 10

使用：

// Creating and adding an element to the page at the same time.
$("ul").append("<li>list item</li>");

- Kaleem Ullah