Learning jQuery

One of my colleague who is learning jQuery asked me what is the difference between $('div') and $('<div/>') , if used as selector. To explain more, take a look at below code.

$('<div/>').addClass('test');
$('div').addClass('test');

It is indeed quite confusing for someone who just started learning jQuery. So I went ahead and explained him about how they are different.

Related Post:

• Learn how to use jQuery?
• Common jQuery Mistakes
• jQuery: Difference between eq() and get()

$('<div/>') : This creates a new div element. However this is not added to DOM tree unless you don't append it to any DOM element.

$('div') : This selects all the div element present on the page.

So, the code $('<div/>').addClass('test') will create a new div element and adds css class called "test". And $('div').addClass('test') will select all the div element present on the page and adds css class "test" to them.

As mentioned earlier that while using $('<div/>'), only new element gets created but it is still not added to DOM. One have to append it to any other element. For example, to append this newly created div to body, use below jQuery code.
$('<div/>').addClass('test').appendTo('body')

Hope you find this useful!!!!

Feel free to contact me for any help related to jQuery, I will gladly help you.