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

Das würde genügen:

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

Zwei Dinge:

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

Answer 2

Sie können dies auch auf eine "objektivere" und dennoch leicht lesbare Weise 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, aber Sie müssen die Spur der Klammern behalten :)

Answer 3

Wenn Sie einfach nur Text in diesen Bereich einfügen li können Sie verwenden:

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

Answer 4

Wie wäre es, wenn Sie "nach" statt "anhängen" verwenden?

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

Mit ".after()" kann der durch den Parameter angegebene Inhalt nach jedem Element in der Menge der übereinstimmenden Elemente eingefügt werden.

Answer 5

JQuery verfügt über die folgenden Optionen, die Ihre Anforderungen in diesem Fall erfüllen könnten:

append wird verwendet, um ein Element am Ende des übergeordneten Elements hinzuzufügen div im Selektor angegeben:

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

prepend wird verwendet, um ein Element oben/am Anfang des übergeordneten Elements hinzuzufügen div im Selektor angegeben:

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

insertAfter können Sie ein Element Ihrer Auswahl nach einem von Ihnen angegebenen Element einfügen. Das von Ihnen erstellte Element wird dann im DOM nach dem angegebenen schließenden Tag des Selektors eingefügt:

$('<li>An element</li>').insertAfter('ul.tabs>li:last');
will result in:
<li><a href="http://stackoverflow.com/user/edit"><span class="tab">Edit</span></a></li>
<li>An element</li>

insertBefore bewirkt das Gegenteil von dem, was oben beschrieben wurde:

$('<li>An element</li>').insertBefore('ul.tabs>li:last');
will result in:
<li>An element</li>
<li><a href="http://stackoverflow.com/user/edit"><span class="tab">Edit</span></a></li>