Wie füge ich ein Listenelement zu einer vorhandenen ungeordneten Liste hinzu?

Ich habe Code, der so aussieht:

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

Ich möchte jQuery verwenden, um Folgendes zur Liste hinzuzufügen:

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

Ich habe es versucht:

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

Aber das fügt das Neue li in das Letzte ein li(kurz vor dem schließenden Tag), nicht danach. Was ist der beste Weg, dies hinzuzufügen li?

Das würde es tun:

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

Zwei Dinge:

• Sie können das einfach <li>an sich <ul>selbst anhängen .
• Sie müssen die entgegengesetzte Art von Anführungszeichen verwenden als in Ihrem HTML-Code. Da Sie in Ihren Attributen doppelte Anführungszeichen verwenden, umgeben Sie den Code mit einfachen Anführungszeichen.

Sie können dies auch objektiver und dennoch einfach zu lesen tun:

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

Sie müssen dann nicht mit Anführungszeichen kämpfen, sondern müssen die Klammern verfolgen :)

Wie wäre es mit "nach" anstelle von "anhängen".

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

".after ()" kann nach jedem Element in den Satz übereinstimmender Elemente einen durch den Parameter angegebenen Inhalt einfügen.

Wenn Sie einfach Text hinzufügen, likönnen Sie Folgendes verwenden:

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

jQuery bietet die folgenden Optionen, die Ihre Anforderungen in diesem Fall erfüllen könnten:

appendwird verwendet, um ein Element am Ende des divim Selektor angegebenen übergeordneten Elements hinzuzufügen :

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

prependwird verwendet, um ein Element am oberen / Anfang des divim Selektor angegebenen übergeordneten Elements hinzuzufügen :

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

insertAfterMit dieser Option können Sie ein Element Ihrer Auswahl nach einem von Ihnen angegebenen Element einfügen. Ihr erstelltes Element wird dann nach dem angegebenen Selector Closing Tag in das DOM eingefügt:

$('<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 wird das Gegenteil von oben tun:

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

Sie sollten an den Container anhängen, nicht an das letzte Element:

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

Die Funktion append () sollte in jQuery wahrscheinlich add () heißen , da sie manchmal die Leute verwirrt. Sie würden denken , es etwas nach dem gegebenen Elemente anhängt, während es tatsächlich fügt es das Element.

Anstatt

$("#header ul li:last")

Versuchen

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

Hier einige Rückmeldungen zur Lesbarkeit von Code (schamloser Plug für ein Blog). http://coderob.wordpress.com/2012/02/02/code-readability

Trennen Sie die Deklaration Ihrer neuen Elemente von der Aktion zum Hinzufügen zu Ihrem UL. Es würde ungefähr so ​​aussehen:

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

Viel Spaß beim Codieren :)

Dies ist der kürzeste Weg, den Sie tun können

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

Wo Blöcke in einem Array. und Sie müssen das Array durchlaufen.

Dies ist eine andere

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

einfach

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