¿Cómo agregar un elemento de lista a una lista desordenada existente?

Tengo un código que se ve así:

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

Me gustaría usar jQuery para agregar lo siguiente a la lista:

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

Intenté esto:

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

Pero eso agrega lo nuevo li dentro del último li(justo antes de la etiqueta de cierre), no después. ¿Cuál es la mejor manera de agregar esto li?

Esto lo haría:

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

Dos cosas:

• Simplemente puede agregar el <li>a la <ul>misma.
• Necesita usar el tipo opuesto de citas que el que está usando en su HTML. Entonces, como está usando comillas dobles en sus atributos, rodee el código con comillas simples.

También puede hacerlo de forma más 'objetiva' y aún fácil de leer:

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

No tienes que pelear con citas, pero debes mantener un rastro de llaves :)

¿Qué tal usar "después" en lugar de "agregar".

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

".after ()" puede insertar contenido, especificado por el parámetro, después de cada elemento en el conjunto de elementos coincidentes.

Si simplemente está agregando texto en eso li, puede usar:

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

jQuery viene con las siguientes opciones que podrían satisfacer su necesidad en este caso:

appendse usa para agregar un elemento al final del padre divespecificado en el selector:

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

prependse usa para agregar un elemento en la parte superior / inicio del padre divespecificado en el selector:

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

insertAfterle permite insertar un elemento de su selección después del elemento que especifique. Su elemento creado se colocará en el DOM después de la etiqueta de cierre del selector especificado:

$('<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 hará lo contrario de lo anterior:

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

Debe agregar al contenedor, no el último elemento:

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

La función append () probablemente debería haberse llamado add () en jQuery porque a veces confunde a las personas. Se podría pensar que agrega algo después del elemento dado, mientras que en realidad lo agrega al elemento.

En vez de

$("#header ul li:last")

tratar

$("#header ul")

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

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

Aquí hay algunos comentarios sobre la legibilidad del código (complemento descarado para un blog). http://coderob.wordpress.com/2012/02/02/code-readability

Considere separar la declaración de sus nuevos elementos de la acción de agregarlos a su UL. Se vería así:

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

Feliz codificación :)

Esta es la forma más corta en que puedes hacer eso

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

Donde bloques en una matriz. y necesitas recorrer la matriz.

Este es otro

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

fácil

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