jQuery: Creating a New DOM element and showing it

Question

So as the title suggests I wish to create a new dom element (the HTML is generated and retrieved via AJAX). I kind of got it working but it appears hidden, and when I try to Fade In it breaks!

   function AddContent(Content) {
        div = document.createElement(Content)
        div.appendTo($("#contentAreas"));
        //    $(div).fadeIn("slow");
        }

It basically inserts the item into the correct position but doesn't show it. When I attempt to fade it in, it's fails to do so. No errors.

Any ideas?

Answer 1

The div needs to be jQuery for appendTo to work. Try this:

 function AddContent( content ) {
     $(content).appendTo("#contentAreas").fadeIn("slow");
 }

Answer 2

Should be $(div).appendTo(...). Or you could change how div is created to div = $(Content), perhaps.

Answer 3

You don't need createElement, the jQuery constructor can take html as a parameter (assuming that content is an html string):

function AddContent(content) {
   var div = $(content);
   div.appendTo($("#contentAreas"));
   $(div).fadeIn("slow");
}

Answer 4

How about this:

   function AddContent(Content) {
        div = $('<div>' + Content + '</div>');           
        div.appendTo($("#contentAreas")).fadeIn("slow");
   }

Answer 5

The appendTo takes a selector so it does not need to be a jquery object as all the other examples above have it.

function AddContent( content ) {
     $(content).appendTo("#contentAreas").fadeIn("slow");
 }