$('') vs $('') in jQuery

Question

I see people creating HTML elements in jQuery in two different ways:

$(\'\')

and

$(\'\') 
<         


        

Answer 1

Technically $('<element></element>') is more correct, since self closing tags using / was removed in HTML5, however it makes absolutely no difference, because that statement is parsed by jQuery. If anything, just using $('<element>') might actually be slightly faster, because it's less chars to read. Which should skip some Regex conditions as well.

Better yet, if you're looking for the fastest possible way using jQuery:

var temp = new jQuery.fn.init();
temp[0] = document.createElement('element');
temp.length = 1;

This version is fastest, because it skips jQuery() which wraps "new jQuery.fn.init()", and passes no arguments so that it immediately returns a new jQuery object. It skips a lot of conditions and fail-safe statements, that are unnecessary if you already know exactly what you're trying to do.

Or slightly shorter:

var temp = $(document.createElement('element'));

This version is slightly slower, but much easier to read, and a lot neater. It still skips a big chunk of code used to parse the, what would be a string being passed. Instead, jQuery can just automatically know we're working with a node here.

Reference
HTML5 Does NOT Allow “Self-Closing” Tags
Google: html5 self closing tags
jsperf

Answer 2

I ran both of those on jsperf and found minimal differences between the two for performance, so I suppose it would end up being a matter of preference, and which element you are creating. To which I would recommend running further tests on jsperf.

jsperf faq: http://jsperf.com/faq

end result: jsperf test

Answer 3

No, it makes no difference at all, as long as the element definition is well-formed. The second style is simply an alternate syntax which can actually save keystrokes:

$('<a href="herp.derp.com/sherp"/>');    // XML-like syntax
$('<a href="herp.derp.com/sherp"></a>'); // Well-formed HTML
$('<a href="herp.derp.com/sherp">');     // Malformed (no closing tag)

Answer 4

A shorthand element <element /> requires a slash because its replacing <element> </element>. So you'd write that wherever appropriate for the sake of valid markup. But its not required to be one way or another.

Edited: this is not actually the problem. others here seem to agree that its a matter of regex performance

Answer 5

There is no difference, as seen in the source code, line 30 & line 121:

/* Line 30*/
rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/,

/* Line 121 */
// If a single string is passed in and it's a single tag
// just do a createElement and skip the rest
ret = rsingleTag.exec( selector );

The following are equivalent:

• <a></a>
• <a />
• <a>

Answer 6

This is what the jQuery docs say about it:

To ensure cross-platform compatibility, the snippet must be well-formed. Tags that can contain other elements should be paired with a closing tag:

$('<a href="http://jquery.com"></a>');

Alternatively, jQuery allows XML-like tag syntax (with or without a space before the slash):

$('<a/>');

Tags that cannot contain elements may be quick-closed or not:

$('<img />'); $('<input>');

See this question, however, on what is most efficient:

What is the most efficient way to create HTML elements using jQuery?