jQuery - La bonne façon d'ajouter un élément enfant?

Question

Ceci est mon premier jour de jQuery, alors ours avec moi. À l'heure actuelle, je suis d'ajouter un élément à mon conteneur parent en procédant comme suit:

var uploadedContainer =$('#uploadedimages'); 
var uploadedItem = '<div><span>'+file.name 
       + '</span><span><a class="mylink" href=remove.aspx?img=' 
       + safeUrl+'>Remove</a></span></div>'; 
uploadedContainer.append(uploadedItem); 

Alors que cela fonctionne, je ne suis pas sûr que ce soit la bonne façon d'accomplir cette tâche. Aussi, est-il possible d'ajouter l'élément au parent et de fondre l'élément enfant? Un exemple d'utilisation serait génial!

Answer 1

Si vous allez ajouter des éléments similaires encore et encore, j'éviterais d'utiliser de longues chaînes dans votre code. Ils sont difficiles à maintenir et créent un code difficile à lire. Je place vous encourager à utiliser un outil de templating comme Handlebars:

<script type="text/x-handlebars-template" id="tmpl"> 
    <div> 
     <span>{{filename}}</span> 
     <span><a href="remove.aspx?image={{safeUrl}}">Remove</a></span> 
    </div> 
</script> 

Maintenant, nous construisons un modèle compilé à partir de ce qui précède:

var template = Handlebars.compile($("#tmpl").html()); 

Tout ce qui reste est d'appeler maintenant la fonction template avec notre objet de données, ajouter le balisage résultant à notre récipient (ou corps), et à la décoloration dans.

var data = { 
    filename: "foo.png", 
    safeUrl: encodeURIComponent("foo image") 
}; 

$("body").append(template(data)).fadeIn(); 

le résultat est plus propre, plus lisible, co Cela aura un sens et sera facile à maintenir.

Démo en ligne: http://plnkr.co/edit/7JVa2w6zOXdITlSfOOAv?p=preview

Answer 2

Ce code devrait fonctionner. Vous pouvez ajouter ce code à effacer quelque chose:

$('#uploadedimages').fadeIn('slow', function() { 
    // Animation complete 
    }); 

Vous devrez définir la visibilité de uploadedImages à caché pour que cela fonctionne.

La documentation de JQuery est très bonne. Je suggère de visiter le JQuery site.

Voici un link pour vous en ce qui concerne la décoloration quelque chose.

Answer 3

var uploadedItem = '<div><span>'+file.name+'</span><span><a class="mylink" href=remove.aspx?img='+safeUrl+'>Remove</a></span></div>'; 

Vous devez éviter élingage HTML avec des chaînes comme celui-ci. Que se passe-t-il si file.name ou safeUrl a un caractère < ou &? Dans le meilleur des cas, vous générez du code HTML invalide, dans le pire des cas, vous venez de laisser un trou de sécurité de cross-site-scripting dans votre application.

De plus, il n'y a pas d'encodage encodeURIComponent sur safeUrl (sauf si vous l'avez déjà fait). Cela devrait être fait aussi pour la fiabilité. Il y a aussi beaucoup plus de caractères qui pourraient rompre avec safeUrl en raison des citations manquantes sur l'attribut href. Mieux: utilisez la méthode text() pour définir le contenu du texte d'un élément et attr() pour définir un attribut sur une valeur.

Ensuite, vous n'avez pas besoin de vous soucier de l'échappement HTML. par exemple:

var div= $('<div><span></span><span><a class="mylink">Remove</a></div>'); 
div.find('span').eq(0).text(file.name); 
div.find('span').eq(1).attr('href', 'remove.aspx?img='+encodeURIComponent(url)); 
div.appendTo('#uploadedimages');