Question

In my function I would like to take an image add a dynamically created caption then wrap it all neatly in a div.

Before:

<img src="whatever" />

After:

<div class="imageBlock">
 <img src="whatever" />
 <span class="caption">The Caption</span>
</div>

This is what I currently have:

var imageCaption = '<span class="caption">'+array[1]+'</span>'
$(this).after(imageCaption).wrap('<div class="imageBlock '+array[0]+'" />');

This is working BUT is placing the span outside of the closing div tag.

Answer 1

You have to pay attention to what this actually refers to.

To get what you want just reverse the order,

var imageCaption = '<span class="caption">'+array[1]+'</span>'
$(this).wrap('<div class="imageBlock '+array[0]+'" />').after(imageCaption);

This is because your object that is being passed is the original image tag. Originally you call after on your tag so it does that correctly, but what gets returned from that call is still just the original image element, not both. So when you call wrap, you are only calling it on the original image tag. By wrapping first, the image tag becomes the child of the wrapped element, then after will insert it in the correct location.

This might be clearer,

var myImage = $(this);
myImage.after(imageCaption);
myImage.wrap('<div class="imageBlock '+array[0]+'" />');

See the problem?