Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 2

Posted by A X
A X
12,842 Points

Why are we appending the overlay (& not understanding the concept of jQuery representation of an object)?

$("body").append('<div id="overlay"></div>') //what he starts with

var $overlay = $ ('<div id="overlay"></div>') //he then creates a variable to reuse this appended code
$("body").append($overlay); //I have no idea what's happening here and why

Can someone explain the break-down of what Andrew's doing in jQuery's Perform: Part 2 with appending the overlay (I'm specifically not understanding the concept of the "jQuery representation of an object" part of this), why this is important to use the jQuery append vs. just adding the div to the bottom of the body (Andrew says this is bad practice), and how adding the $ magically makes the div string into jQuery...object?

Simon Coates
Simon Coates
28,694 Points
Simon Coates
Simon Coates
28,694 Points

As for the passing the string to jquery, I guess it just knows (maybe due to the leading <). Again I wondered the same thing. I think you're supposed to just accept this as "jquery magic". You can make the argument that the dynamic addition of the element is slightly more detached (separation of layers), in that code features in the css and js, rather than needing to have parts of the lightbox in the html (the div), js, and some css.

1 Answer

Nicholas Vogel
Nicholas Vogel
12,318 Points
Nicholas Vogel
Nicholas Vogel
12,318 Points

You would want to append the lightbox because you only want it present when it's being used. Otherwise you're taking up valuable html space for something that may or may not be used. It's all about user experience at that point. There is also the possibility that you won't have access to editing the HTML, in which case you want to still be able to make the desired changes.

If I remember correctly, you edit the CSS for this, but you can also use jQuery to edit CSS. It just takes longer.

ADDED NOTE:

$("body").append('<div id="overlay"></div>') //what he starts with

var $overlay = $('<div id="overlay"></div>') //he then creates a variable to reuse this appended code
$("body").append($overlay); //I have no idea what's happening here and why

What's happening at the end there is that you are selecting the body element of the HTML by using the jQuery selector $("body"), appending the $overlay variable to the HTML by the append method. Storing the $('<div>...</div>') in a variable starting with $ is just best practice as it is easier to tell that it is a jQuery variable when mixed with regular JavaScript. It knows it's a string because you're passing a string to the variable with the single quotes.

Hope all that helps!