How to add a list item to an existing unordered list?

问题

I have code that looks like this:

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

I\'d like to use jQuery to add the following to the list:

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

I tried this:

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

But that adds the new li inside the last li (just before the closing tag), not after it. What\'s the best way to add this li?

回答1:

This would do it:

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

Two things:

You can just append the <li> to the <ul> itself.
You need to use the opposite type of quotes than what you're using in your HTML. So since you're using double quotes in your attributes, surround the code with single quotes.

回答2:

You can do it also in more 'object way' and still easy-to-read:

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

You don't have to fight with quotes then, but must keep trace of braces :)

回答3:

How about using "after" instead of "append".

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

".after()" can insert content, specified by the parameter, after each element in the set of matched elements.

回答4:

If you are simply adding text in that li, you can use:

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

回答5:

jQuery comes with the following options which could fulfil your need in this case:

append is used to add an element at the end of the parent div specified in the selector:

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

prepend is used to add an element at the top/start of the parent div specified in the selector:

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

insertAfter lets you insert an element of your selection next after an element you specify. Your created element will then be put in the DOM after the specified selector closing tag:

$('<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 will do the opposite of the above:

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

回答6:

You should append to the container, not the last element:

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

The append() function should've probably been called add() in jQuery because it sometimes confuses people. You would think it appends something after the given element, while it actually adds it to the element.

回答7:

Instead of

$("#header ul li:last")

try

$("#header ul")

回答8:

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

回答9:

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

Here is some feedback regarding Code Readability (shameless plug for a blog). http://coderob.wordpress.com/2012/02/02/code-readability

Consider separating the declaration of your new elements from the action of adding them to your UL.. It would look something like this:

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

Happy coding :)

回答10:

This is the shortest way you can do that

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

Where blocks in an array. and you need to loop through the array.

回答11:

This is another one

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

回答12:

easy

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

来源：https://stackoverflow.com/questions/1145208/how-to-add-a-list-item-to-an-existing-unordered-list

标签

jquery

jquery-append