Hinzufügen eines Listenelements zu einer bestehenden unsortierten Liste

Question

Ich habe einen Code, der wie folgt aussieht:

<div id="header">
    <ul class="tabs">
        <li><a href="http://stackoverflow.com/user/view"><span class="tab">Profile</span></a></li>
        <li><a href="http://stackoverflow.com/user/edit"><span class="tab">Edit</span></a></li>
    </ul>
</div>

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

<li><a href="http://stackoverflow.com/user/messages"><span class="tab">Message Center</span></a></li>

Ich habe dies versucht:

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

Aber das fügt die neue li innerhalb die letzte li (kurz vor dem schließenden Tag), nicht danach. Wie füge ich das am besten ein? li ?

Answer 1

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

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

El anhängen() Funktion hätte wahrscheinlich heißen sollen add() in jQuery, weil es die Leute manchmal verwirrt. Man könnte denken, dass es etwas nach dem angegebenen Element anhängt, während es tatsächlich fügt hinzu. zum Element.

Answer 2

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

Answer 3

Anstelle von

$("#header ul li:last")

intente

$("#header ul")

Answer 4

Verwendung:

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

Hier finden Sie einige Rückmeldungen zu Code-Lesbarkeit (schamlose Werbung für einen Blog). http://coderob.wordpress.com/2012/02/02/code-readability

Ziehen Sie in Erwägung, die Deklaration Ihrer neuen Elemente von der Aktion des Hinzufügens zu Ihrem UL. zu trennen. Das würde dann etwa so aussehen:

var tabSpan = $('<span/>', {
    html: 'Message Center'
});
var messageCenterAnchor = $('<a/>', {
    href='http://stackoverflow.com/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);

Answer 5

Verwendung:

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