Raw DOM element vs. jQuery object

elem is a raw DOM element. By wrapping elem $(elem) you are creating a jQuery object from the raw DOM element. jQuery allows you to do this. You are then calling .prepend() on the jQuery object created from elem.

This could be helpfull..

var test = document.getElementById('test') //returns a HTML DOM Object var test = $('#test') //returns a jQuery Object var test = $('#test')[0] //returns a HTML DOM Object 

you are converting the raw DOM element to jquery object again.. see the first $ sign in the the elem. elem is raw but $(elem) is jquery object and thus you can use any jQuery function(methods) available prepend being one

 $( elem ).prepend( '<b>' + index + ': </b>' ); //-^-- here this $ sign 

The "elem" in the example above could be any tag (h1, p, body, a combination of tags, a specific reference to an id or class) Just like CSS. Then "prepend" is the action performed on that element. In this case the prepend action take one parameter, which is another element that will be dynamically placed into the html as the first child element for every element on the page that matches your selected "elem"

jQuery creates a "wrapped" element - a jQuery object so perhaps this will give your some insight:

$('li').each(function (index, elem) { alert(elem === this); // true alert($(this) === $(elem)); // false alert(elem.tagName + $(elem).tagName); // LI undefined alert(typeof elem + typeof $(this));// object object alert(elem.tagName === $(this).prop('tagName')); // true }); 

Notice that second alert = false, so even though they "refer" to the same element, $(this) and $(elem) are NOT the same wrapped object. Notice that the "raw" elem has a .tagName whereas the jQuery wrapped object does not.

SO for your

$(elem).prepend('<b>' + index + ':</b>'); 

jquery takes the wrapped elem ($(elem)), and then prepends a NEW wrapped 'b' element with the index and ":" character as its content text

EDIT: added example of the property for tagName to the jQuery object in a further example and a prepend explanation.

Unlike Prototype, jQuery doesn't extend native objects. This is why you have to use $ function to get jQuery-wrapped one.