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

Answer 1

这样就可以了：

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

两件事：

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

Answer 2

您也可以采用更多“对象方式”并且仍然易于阅读：

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

你不必再与引号斗争，但必须保留一些大括号：）

Answer 3

如何使用“after”而不是“append”。

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

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

Answer 4

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

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

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>');

追加（）函数应该在jQuery中被称为 add（），因为它有时会让人感到困惑。您会认为它会在给定元素之后附加某些内容，而实际上将添加到元素中。

Answer 7

而不是

$("#header ul li:last")

试

$("#header ul")

Answer 8

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

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-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);

快乐编码：）

Answer 10

这是你能做到的最短路

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

数组中的块。你需要遍历数组。

Answer 11

这是另一个

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

Answer 12

轻松

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

Answer 13

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

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

如何在现有的<ul>？</ul> </li>中添加<li>

13 个答案: