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

548

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?

Eileen
quelle

Antworten:

816

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.
Paolo Bergantino
quelle
6
Sollte es nicht '#header' statt '#content' sein?
Dipak
15
Nur als Randnotiz können Sie Prepend anstelle von Append verwenden, falls Sie als erstes Element anstelle des letzten hinzufügen möchten
Thomas
517

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

Donau-Seemann
quelle
Würde Ihr Ansatz nicht neue Tags starten, aber nicht schließen?
Everton
1
Nein, jquery erstellt Tags mithilfe der DOM-Manipulation, daher muss es nur den Namen kennen
Danubian Sailor
Ich liebe es. Ich hasse es, mit Zeichenfolgen und Anführungszeichen herumzuspielen :) Übrigens: Eine andere Option wäre stackoverflow.com/a/4673436/112000
Tomáš Fejfar
2
Dies ist bei weitem der bevorzugtere Weg, dh die objektorientiertere Art und Weise.
Will
Gibt es welche, um Multi gleichzeitig zu apend?
Tyan
51

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.

satomacoto
quelle
3
Danke, das hat mir geholfen. Um in die Mitte einer Liste einzufügen, müssen Sie beforeoder verwenden after.
Patrick Fisher
1
Dies zusammen mit der Antwort von @ Danubian_Sailor war
genau das Richtige
50

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

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

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>
Ole Haugset
quelle
16

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.

Philippe Leybaert
quelle
7

Anstatt

$("#header ul li:last")

Versuchen

$("#header ul")
Adrian Godong
quelle
6
$("#content ul").append('<li><a href="https://stackoverflow.com/user/messages"><span class="tab">Message Center</span></a></li>');
Evan Meagher
quelle
6
$("#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 :)

unbestreitbarrob
quelle
var newListItem = $ ('<li />', {html: messageCenterAnchor}); Wie bekomme ich das li und id?
jmogera
@jmogera, versuchst du die ID zu setzen? Wenn ja, können Sie dies einfach innerhalb der {} tun. Ich habe den Code oben aktualisiert :)
unbestreitbar
3

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.

user3516328
quelle
2

Dies ist eine andere

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

einfach

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