Comment ajouter un élément de liste à une liste existante non ordonnée?

J'ai un code qui ressemble à ceci:

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

Je voudrais utiliser jQuery pour ajouter ce qui suit à la liste:

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

J'ai essayé ceci:

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

Mais cela ajoute le nouveau li à l' intérieur du dernier li(juste avant la balise de fermeture), pas après. Quelle est la meilleure façon d'ajouter cela li?

Cela le ferait:

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

Deux choses:

• Vous pouvez simplement ajouter le <li>au <ul>lui - même.
• Vous devez utiliser le type de guillemets opposé à celui que vous utilisez dans votre code HTML. Donc, comme vous utilisez des guillemets doubles dans vos attributs, entourez le code de guillemets simples.

Vous pouvez également le faire de manière plus «objet» et toujours facile à lire:

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

Vous n'avez donc pas à vous battre avec des guillemets, mais vous devez garder une trace d'accolades :)

Que diriez-vous d'utiliser "après" au lieu de "ajouter".

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

".after ()" peut insérer du contenu, spécifié par le paramètre, après chaque élément dans l'ensemble des éléments correspondants.

Si vous ajoutez simplement du texte li, vous pouvez utiliser:

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

jQuery est livré avec les options suivantes qui pourraient répondre à votre besoin dans ce cas:

appendest utilisé pour ajouter un élément à la fin du parent divspécifié dans le sélecteur:

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

prependest utilisé pour ajouter un élément en haut / début du parent divspécifié dans le sélecteur:

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

insertAftervous permet d'insérer un élément de votre sélection après un élément que vous spécifiez. Votre élément créé sera ensuite placé dans le DOM après la balise de fermeture du sélecteur spécifiée:

$('<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 fera le contraire de ce qui précède:

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

Vous devez ajouter au conteneur, pas au dernier élément:

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

La fonction append () aurait probablement dû être appelée add () dans jQuery car elle déroute parfois les gens. On pourrait penser qu'il ajoute quelque chose après l'élément donné, alors qu'il l' ajoute réellement à l'élément.

Au lieu de

$("#header ul li:last")

essayer

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

Voici quelques commentaires concernant la lisibilité du code (plug sans vergogne pour un blog). http://coderob.wordpress.com/2012/02/02/code-readability

Pensez à séparer la déclaration de vos nouveaux éléments de l'action de les ajouter à votre UL. Cela ressemblerait à ceci:

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

Bon codage :)

C'est le moyen le plus court de le faire

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

Où bloque dans un tableau. et vous devez parcourir le tableau.

C'est un autre

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