In jQuery, how does prepend() work on a children() function?

Question

I am a little confused on how prepend acts towards a children function.

image.canvas.children('.image-pinpoint-view').prepend(this.area);

where would this.area appear?

Answer 1

It adds this.area (or a clone) as the first child of every matching child of image.canvas. Matching children are those with the image-pinpoint-view class. A DOM node can only be in one place, but jQuery will clone the element so there's one for each desired parent.

Answer 2

Prepend puts the specified content at the beginning of the element.

<div id="content">
   <div id="a">data</div>
</div>

$('#content').prepend('<div id="b">prepended data</div>');

would result in

<div id="content">
   <div id="b">prepended data</div>
   <div id="a">data</div>
</div>

$('#content').prepend( $('#a') );

would result in

<div id="content">
       <div id="a">data</div>
       <div id="b">prepended data</div>
    </div>

Answer 3

Every jQuery object is an array. Every jQuery method is applied to all elements. If you write:

 $(".elements").css(...) 

...the style will be applied to all elements.

Similarly, in your case, the element (this.area) will be cloned and one clone will be inserted before each children.

See it in action.