Come aggiungere una voce di elenco a una lista non ordinata esistente?

Ho un codice simile al seguente:

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

Vorrei usare jQuery per aggiungere quanto segue all'elenco:

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

Ho provato questo:

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

Ma questo aggiunge il nuovo li all'interno dell'ultimo li(poco prima del tag di chiusura), non dopo. Qual è il modo migliore per aggiungere questo li?

Questo lo farebbe:

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

Due cose:

• Puoi semplicemente aggiungere il <li>a <ul>se stesso.
• Devi usare il tipo di virgolette opposto rispetto a quello che stai usando nel tuo HTML. Quindi, poiché stai usando virgolette doppie nei tuoi attributi, circonda il codice con virgolette singole.

Puoi farlo anche in modo più "oggettivo" e comunque di facile lettura:

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

Allora non devi combattere con le virgolette, ma devi tenere traccia delle parentesi graffe :)

Che ne dici di usare "after" invece di "append".

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

".after ()" può inserire contenuto, specificato dal parametro, dopo ogni elemento nell'insieme di elementi corrispondenti.

Se stai semplicemente aggiungendo del testo li, puoi usare:

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

jQuery viene fornito con le seguenti opzioni che potrebbero soddisfare le tue esigenze in questo caso:

appendviene utilizzato per aggiungere un elemento alla fine del genitore divspecificato nel selettore:

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

prependviene utilizzato per aggiungere un elemento all'inizio / all'inizio del genitore divspecificato nel selettore:

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

insertAfterconsente di inserire un elemento della selezione dopo un elemento specificato. L'elemento creato verrà quindi inserito nel DOM dopo il tag di chiusura del selettore specificato:

$('<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 farà il contrario di quanto sopra:

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

È necessario aggiungere al contenitore, non l'ultimo elemento:

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

La funzione append () avrebbe probabilmente dovuto essere chiamata add () in jQuery perché a volte confonde le persone. Penseresti che accoda qualcosa dopo l'elemento dato, mentre in realtà lo aggiunge all'elemento.

Invece di

$("#header ul li:last")

provare

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

Ecco alcuni feedback sulla leggibilità del codice (spina spudorata per un blog). http://coderob.wordpress.com/2012/02/02/code-readability

Prendi in considerazione la possibilità di separare la dichiarazione dei tuoi nuovi elementi dall'azione di aggiungerli al tuo UL. Sarebbe simile a questo:

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

Buona programmazione :)

Questo è il modo più breve per farlo

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

Dove blocchi in un array. ed è necessario passare in rassegna l'array.

Questo è un altro

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

facile

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