How to add in an existing ?

Question

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?

Answer 1

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

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

Answer 2

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.

Answer 3

Instead of

$("#header ul li:last")

try

$("#header ul")

Answer 4

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

Answer 5

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.

Answer 6

$("#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 :)