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 4

Posted by john larson
john larson
16,594 Points

Why does appending the caption to the image not work, but appending the caption to the overlay does?

var $overlay = $("<div id='overlay'></div>");
var $image = $("<img>");
var $caption = $("<p></p>");
// this is the way andrew does it
$("body").append($overlay);
$($overlay).append($image);
$($overlay).append($caption);

// I was thinking this would work as well, but it does not.  Why?
$("body").append($overlay);
$($overlay).append($image);
// it seems like since the caption comes after the image we should be able to append to it, but it does not work
$($image).append($caption);




$("#imageGallery a").click(function(event){
  event.preventDefault();
  var imageLocation = $(this).attr("href");
  $image.attr("src", imageLocation);
  $overlay.fadeIn(500);
  var captionText = $(this).children("img").attr("alt");
  $caption.text(captionText);
});

$($overlay).click(function(){
  $(this).fadeOut(500);
});

1 Answer

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

The <img> element is contentless. It gets all the information it needs from the properties. It doesn't even have a closing tag. So an append, which adds content inside the element, may modify the DOM tree but only in a way that will be ignored.

On the other hand, <div> elements are specifically made to contain other things. So the append does exactly what you would expect.

Hope that clears it up, and happy coding!   -sp:sparkles:

john larson
john larson
16,594 Points

Thanks Steven, that gives me enough info to contemplate. I did not realize that div tags specifically were meant to hold other things. Is that true of p tags also? cause as this point I have kinda used div tags and p tags interchangeably for holding content and maybe I shouldn't?

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

Most elements hold things, the contentless elements are the minority.

The main difference between <div>s and <p>s is the default styles applied to them (paragraphs have vertical margins, for example). But the main reason to choose a particular tag is the relationship to it's content, to make it easier to apply styles later on. For instance, you might want to indent paragraphs but you probably would not want to indent everything in a <div>.

I think of <div> as the "brown bag" of elements. It's kind of a generic container, very handy but it doesn't imply any specific type of content. If you're wrapping an actual paragraph of text, use <p>.

john larson
john larson
16,594 Points

As always, your answers are sterling, thank you so much!