CODEWITHSUNDEEP
jquery
clarkk
clarkk

Reputation: 27685

append DOM node

im having problems with appending DOM nodes..

this doesn't work:

this.loader = $(document.body).append('<div class="loader" style="display:none">loader</div>');

$(this.loader).fadeIn(1000);

but this works:

this.loader = DOM.div(document.body);
with(this.loader){
    className = 'loader';
    innerHTML = 'loader';
    style.display = 'none';
}

$(this.loader).fadeIn(1000);

can anybody tell me what is wrong?!

but if I do like this the div gets added and its visible

this.loader = $(document.body).append('<div class="loader">loader</div>');

Upvotes: 0

Views: 263

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1074178

append returns the jQuery object for the selector / object you passed into it, so your first line is getting the jQuery object around document.body, not the jQuery wrapper for your new div. You probably want appendTo:

this.loader = $('<div class="loader" style="display:none">loader</div>').appendTo(document.body);
this.loader.fadeIn(1000);

Or the longer (but perhaps clearer way):

this.loader = $('<div class="loader" style="display:none">loader</div>');
this.loader.appendTo(document.body);
this.loader.fadeIn(1000);

Also note that what you get back is already a jQuery object, so you don't need to use $() on it.

Upvotes: 1

Tejs
Tejs

Reputation: 41236

The append function does not return the value you are thinking of I believe. You should do something like this:

 var myDiv = $('<div class="loader" style="display:none">loader</div>');
 $(document.body).append(myDiv);

 myDiv.fadeIn(1000);

Upvotes: 1

Related Questions