566

我的代码如下所示：

<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？

4

14 回答 14

843

这会做到：

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

两件事情：

  • 您可以将 附加<li>到<ul>自身。
  • 您需要使用与您在 HTML 中使用的相反类型的引号。因此，由于您在属性中使用双引号，因此请用单引号将代码括起来。
于 2009-07-17T19:29:55.310 回答
523

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

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

那时你不必与引号打架，但你必须保留大括号的痕迹:)

于 2011-11-09T09:33:25.310 回答
55

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

 $("#ul").append($("<li>").text("Some Text."));
于 2014-03-07T00:42:01.057 回答
53

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

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

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

于 2012-01-18T07:06:41.657 回答
30

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

appenddiv用于在选择器中指定的父级末尾添加一个元素：

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

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

$('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>
于 2014-09-30T12:58:02.220 回答
18

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

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

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

于 2009-07-17T19:30:38.410 回答
7 
$("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
于 2009-07-17T19:29:41.283 回答
7

代替

$("#header ul li:last")

尝试

$("#header ul")
于 2009-07-17T19:32:21.450 回答
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);
于 2012-02-02T17:32:16.590 回答
5

采用：

// Creating and adding an element to the page at the same time.
$("ul").append("<li>list item</li>");
于 2015-09-21T09:19:00.770 回答
3

这是您可以做到这一点的最短方法：

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

blocks数组在哪里。你需要遍历数组。

于 2016-05-25T03:24:51.373 回答
2

这是另一个

$("#header ul li").last().html('<li> Menu 5 </li>');
于 2014-09-30T12:49:37.553 回答
0

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

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

于 2020-06-17T11:25:02.533 回答
0

使用jqueryli的prepend()函数ul作为第一项添加

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

使用jqueryli的append()函数ul作为最后一项添加

$("ul").append("<li>last item</li>");
于 2021-12-29T17:49:43.173 回答