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

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