jQuery - Der richtige Weg, um ein Child-Element hinzuzufügen?

Question

Dies ist mein erster Tag von jQuery, also ertragen Sie mit mir. Derzeit bin ich das Hinzufügen eines Elements zu meinem übergeordneten Container durch folgende Maßnahmen:

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

Während es funktioniert, ich bin nicht sicher, ob das der richtige Weg ist, diese Aufgabe auszuführen. Ist es auch möglich, das Element dem übergeordneten Element hinzuzufügen und das untergeordnete Element zu verblassen? Ein Anwendungsbeispiel wäre großartig!

Answer 1

Wenn Sie ähnliche Elemente immer wieder hinzufügen, würde ich vermeiden, lange Strings in Ihrem Code zu verwenden. Sie sind schwer zu pflegen und erstellen schwer lesbaren Code. Ich würde Dich stattdessen ermutigen, ein Templat-Tool wie Handlebars zu verwenden:

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

Jetzt bauen wir eine kompilierte Vorlage aus der oben:

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

, dass alle jetzt links mit unserem die template Funktion aufzurufen ist Datenobjekt, das resultierende Markup unserem Behälter append (oder Körper), und verblassen sie in.

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

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

Das Ergebnis ist eine sauberere, leserlich, co de das macht Sinn und ist leicht zu pflegen.

Demo Online: http://plnkr.co/edit/7JVa2w6zOXdITlSfOOAv?p=preview

Answer 2

Dieser Code sollte funktionieren. Sie können diesen Code hinzufügen verblassen etwas in:

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

Sie benötigen die Sichtbarkeit von uploadedimages zu setzen, um für diese versteckt zu arbeiten.

Die JQuery-Dokumentation ist sehr gut. Ich würde empfehlen, die JQuery site zu besuchen.

Hier ist ein link für Sie in Bezug auf etwas verblassen.

Answer 3

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

Sie sollten slinging HTML vermeiden zusammen mit Strings wie diese. Was ist, wenn file.name oder safeUrl ein < oder & Zeichen in? Im besten Fall generieren Sie ungültigen HTML-Code. Im schlimmsten Fall haben Sie gerade eine Sicherheitslücke für Cross-Site-Scripting in Ihrer App hinterlassen.

Außerdem gibt es keine encodeURIComponent Codierung auf safeUrl (es sei denn, Sie haben das bereits getan). Das müsste auch für die Zuverlässigkeit getan werden. Es gibt auch viel mehr Zeichen, die mit safeUrl aufgrund der fehlenden Anführungszeichen für das href-Attribut brechen können.

Besser: Verwenden Sie die text() Methode, um den Textinhalt eines Elements festzulegen, und attr(), um ein Attribut auf einen Wert festzulegen. Dann müssen Sie sich keine Gedanken über HTML-Escaping machen. zB:

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