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


Brian Mendez
Brian Mendez
7,734 Points

Why does the <div></div> need to be in the overlay variable.

I am referring to the $overlay variable we crated on line 1? I wondered this when I saw it in the last lesson, but could someone clarify why you must include the <div> open/closing tags instead of just reference the id="overlay" tag?

var $overlay = $('<div id="overlay"></div>');

Thanks for the help!

Melissa Austin
Melissa Austin
3,383 Points

Can you please post the course you are working on?

1 Answer

John Coolidge
John Coolidge
12,614 Points

Hello Brian,

I assume you are talking about the JQuery lightbox that Andrew Chalkley helps you create in the JQuery Basics course.

When you create an element that doesn't exist in the HTML the standard way to do so is like so:

var $overlay = $('<div id="overlay"></div>');

So why do you need the div? Well, if you just did this...

var $overlay = $('id="overlay"');

...you'd get an error. Your program doesn't know what it is you are trying to create. The error in the console will say that it is an unrecognizable expression. When you add the div opening and closing tags, or any opening and closing tags for any HTML element, you are telling the program that you want to create that specific element. Because overlay doesn't yet exist in the HTML, you are creating it, rather than selecting an already existing element. If I wanted to create a list item element or a paragraph element, I'd do it like so:

var $paragraph = $('<p></p>');

var $listItem= $('<li></li>');

When you create a new element in JQuery, you don't have to give it a class or an id. That is optional. When you create any element, any property associated with that element can be altered. I can create an image in the same way and give it an alt or a title property or I can create a check box or radio button and set the property to have it checked automatically or I can create these elements without any properties. It all depends on what I want to do with them in my program. But at the bare minimum, when you create an element, you must use the opening and closing tags of that element so that JQuery knows what type of element you want to create.

Also, in the future if you have a question related to a specific video you are watching, you can click the questions tab below the video and click the Get Help button on the right. When you do that, your question will automatically be associated with the video you are watching so that those who might answer your question know more about what you are referencing. I just happened to recall what lesson in JQuery you were referencing (the $overlay variable gave it away) so I was able to give you an answer.

I hope this helps you understand better, and please don't hesitate to ask more questions if something isn't clear. John