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

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 inside 最后li （就在结束标记之前），而不是在它之后。 添加此 li 的最佳方式是什么？

Answer 1

这样做可以做到这一点：

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

有两件事：

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

Answer 2

您还可以以更“对象”且仍然易于阅读的方式进行操作：

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

那么您不必与引号进行斗争，但必须保留大括号的痕迹:)

Answer 3

如果您只是在该 li 中添加文本，则可以使用：

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

Answer 4

使用“after”而不是“append”怎么样？

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

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

Answer 5

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>

Answer 6

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

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

append() 函数可能应该在 jQuery 中称为 add()，因为它有时会让人感到困惑。 您可能会认为它在给定元素之后附加了某些内容，但实际上它将其添加到元素中。

Answer 7

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

Answer 8

而不是

$("#header ul li:last")

尝试

$("#header ul")

Answer 9

使用：

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

这里有一些关于代码可读性的反馈（博客的无耻插件）。
http://coderob.wordpress.com/2012/02/02/code-可读性

考虑将新元素的声明与将它们添加到 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);

Answer 10

使用：

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

Answer 11

这是最短的方法：

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

其中 blocks 是一个数组。 并且您需要循环遍历数组。

Answer 12

这是另一张

$("#header ul li").last().html('<li> Menu 5 </li>');

Answer 13

使用 prepend() 在 ul 中添加 li 作为第一项jquery的功能

$("ul").prepend("<li>first item</li>");

在ul中添加li作为最后一项使用 append() 函数/" rel="nofollow noreferrer">jquery

$("ul").append("<li>last item</li>");

Answer 14

只是添加到此线程 - 如果您移动现有项目，您将需要使用克隆，然后使用 true/false 来确定是否克隆/深度克隆事件好吧（https://api.jquery.com/clone/）。

例子：
$("#content ul").append($('.existing_li').clone(true));