jQuery -- The right way to add a child element?

This is my first day of jQuery, so bear with me. Currently, I am adding an element to my parent container by doing the following:

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(upl开发者_C百科oadedItem);

While it works, I'm not sure if that's the right way to accomplish this task. Also, is it possible to add the element to the parent, and fade the child element in? An example of usage would be great!

---

If you're going to be adding similar elements over and over, I would avoid using lengthy strings in your code. They are a pain to maintain, and create difficult-to-read code. I would instead encourage you to use a templating tool like 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>

Now we build a compiled template from the above:

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

All that is left now is to call the template function with our data object, append the resulting markup to our container (or body), and fade it in.

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

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

The result is cleaner, more legible, code that will make sense and be easy to maintain.

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

---

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

You should avoid slinging HTML together with strings like this. What if file.name or safeUrl has a < or & character in? In the best case you're generating invalid HTML, in the worst case you've just left a cross-site-scripting security hole in your app.

Also, there is no encodeURIComponent encoding on safeUrl (unless you've done that already). That would need to be done too for reliability. There are also many more characters that might break with safeUrl due to the missing quotes on the href attribute.

Better: use the text() method to set the text content of an element, and attr() to set an attribute to a value. Then you do not need to worry about HTML-escaping. eg.:

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

---

That code should work. You can add this code to fade something in:

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

You'll need to set the visibility of uploadedimages to hidden for this to work.

The JQuery documentation is very good. I would suggest visiting the JQuery site.

Here is a link for you regarding fading something in.