Enregistrement d'un nouvel article dans la liste UL via Jquery

Question

J'ai le problème suivant: J'ai une liste UL et je souhaite ajouter des valeurs via un champ de saisie dans cette liste via jquery. Après avoir cliqué sur un lien de sauvegarde, l'entrée doit apparaître comme nouvelle entrée li.

Le html

<ul id="first"> 
<li><input name="" size="40" maxlength="60" value="" id="up-form" /> <a href="javascript:;" onClick="javascript: $('#first').add('<li>'+$('#up-form').val()+'</li>');">Save</a></li> 
</ul> 

En cliquant sur Save Link la valeur du champ d'entrée n'apparaît comme une nouvelle li dans la liste. Des idées ou des conseils?

Answer 1

changement .add à .append

Citation de la méthode add

le procédé .add() construit un nouveau objet jQuery de l'union de ces éléments et celles adoptées dans le procédé .

Citation de la méthode append

Procédé .append()insère le contenu spécifié comme dernier enfant de chaque élément dans la collection jQuery

démo à http://www.jsfiddle.net/yS7eG/

Answer 2

Je crois que c'est ce que vous cherchez: jQuery - How can i dynamically add a list item to an unordered list?

Answer 3

Vous seriez mieux avec un événement click, comme ceci:

$("#first > li > a").click(function(){ 
    $("#first").append('<li>'+$('#up-form').val()+'</li>'); 

    return false; 
}); 

Vous pouvez également utiliser $(this).closest("ul").append('<li>'+$('#up-form').val()+'</li>');.

Ensuite, le code HTML peut être changé pour:

<ul id="first"> 
    <li><input name="" size="40" maxlength="60" value="" id="up-form" /> <a href="">Save</a></li> 
</ul>