CODEWITHSUNDEEP
jqueryasp.net-mvcajaxdomelement
Damien
Damien

Reputation: 14057

jQuery: Creating a New DOM element and showing it

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?

Upvotes: 4

Views: 5860

Answers (5)

tvanfosson
tvanfosson

Reputation: 532605

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

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

Upvotes: 2

redsquare
redsquare

Reputation: 78677

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

Upvotes: 2

karim79
karim79

Reputation: 342695

How about this:

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

Upvotes: 3

Alistair Evans
Alistair Evans

Reputation: 36513

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

Upvotes: 3

John Kugelman
John Kugelman

Reputation: 361977

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

Upvotes: 5

Related Questions