Good practices when creating elements with jQuery

Question

When I need to create elements in the DOM through jQuery, I usually use the following syntax:

$('<div>').addClass('minha-div').attr({id: 'id-da-div'});

However, what I usually see in Internet tutorials is a little different. Is usually:

$('<div></div>').addClass('minha-div').attr({id: 'id-da-div'});

Or:

$('<div id="id-da-div" class="minha-div"></div>');

• I wonder if, because I didn’t close the div in the first example, there could be some problem (until today it worked correctly) and if this is bad practice.

• I must create the attributes by the functions of jQuery (as in the first and second example) or I must "write it" directly into the argument where I pass the selector (third example)?

Answer 1

You should close the div:

"To ensure cross-Platform Compatibility, the snippet must be well-Formed. Tags that can contain other Elements should be paired with a closing tag" http://api.jquery.com/jQuery/#jQuery2

As for the second question, I think it does not matter. If it is not constant I prefer to use the first way. It seems that the last one is faster (http://jsperf.com/jquery-element-creationyay/19)

Answer 2

You can also use as follows:

$('<div>', {
    id: 'minhaDiv',
    class: 'minhaClasse',
    'outro-atributo': 'meuValor'
}).appendTo('body');

I always use it like this, it works perfectly!