Difference between $('div') and $('<div/>') in 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:

$('<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.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..