jQuery: comment ajouter <li> dans un <ul>?

Question

J'ai un code qui ressemble à ceci:

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

Je voudrais utiliser jQuery pour ajouter les éléments suivants à la liste:

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

J'ai essayé ceci:

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

Mais qui ajoute la nouvelle li à l'intérieur de la dernière li (juste avant la balise de fermeture), pas après. Quelle est la meilleure façon d'ajouter ce li?

Answer 1

Ce serait faire:

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

Deux choses:

• Vous pouvez simplement ajouter l' <li> de la <ul> lui-même.
• Vous devez utiliser le type opposé de citations que ce que vous utilisez dans votre code HTML. Donc, puisque vous utilisez des guillemets dans vos attributs, entourer le code avec des guillemets simples.

Answer 2

Vous pouvez le faire aussi en plus de l'objet way " 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 pas à lutter avec des citations ensuite, mais il doit garder la trace de croisillons :)

Answer 3

Si votre juste ajouter du texte vous pouvez utiliser:

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

Answer 4

Comment sur l'utilisation de "après" au lieu de "ajouter".

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

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

Answer 5

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

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

Le append() de la fonction avez probablement été appelé add() en jQuery, car il confond parfois les gens. On pourrait penser qu'il ajoute quelque chose après l'élément donné, alors qu'il fait ajoute à l'élément.