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

Question

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

$('<element>')

and

$('<element />')

I am curious which one is "more correct". I see the obvious advantage to the first one as being just simply less to type. Does it make a difference at all which one is used?

and why cannot you use `document.createElement('element')` ? Is there some law which forces you to write as slow code as possible ?! — tereško, Mar 12 '12 at 22:23
@tereško Unless you benchmarked that this piece of code is a bottleneck in your application, performance shouldn't be the main factor in this choice. I expect the performance difference to be only relevant in tight loops. But rather clarity and consistency of code. If you use jquery in most places, there is no reason to use DOM here, and if you mainly use DOM, there is no reason to use jquery for this. — CodesInChaos, Mar 12 '12 at 22:31
@tereško +1... cost of object creation + cost of string parsing + cost of many conditions + cost of crazy design pattern = jQuery bill. — Shea, Mar 12 '12 at 22:33

score 27 · Accepted Answer · answered Mar 12 '12 at 22:09

27

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>

answered Mar 12 '12 at 22:09

Rob W

341,306
83
791
678

4

When I was writing this question I was thinking that I could figure it out on my own by looking at the source code. I appreciate you referencing the code directly in your answer. – GoldenNewby Mar 12 '12 at 22:17
So, no difference **as long as you never have attributes** in the creation statement. If you change the code to `$('')` then anybody's browser .innerHTML will parse it. – Bob Stein Apr 25 '16 at 14:26

score 6 · Answer 2 · edited Jan 26 '16 at 19:32

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

No version of HTML before HTML5 ever had self-closing tags. [They are valid in HTML5](http://dev.w3.org/html5/spec-author-view/syntax.html#syntax-start-tag) but it makes no difference for void elements. — rink.attendant.6, Jun 10 '14 at 14:57

Justin ᚅᚔᚈᚄᚒᚔ · Answer 3 · 2012-03-12T22:13:31.427

4

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)

edited Mar 12 '12 at 22:13

answered Mar 12 '12 at 22:07

Justin ᚅᚔᚈᚄᚒᚔ

15,081
7
52
64

Thats an interesting point about how in that application it saves keystrokes. I had always just been using .attr to set the href. – GoldenNewby Mar 12 '12 at 22:14
It's a silly example, true, but there are real cases where using the XML syntax equals less typing. – Justin ᚅᚔᚈᚄᚒᚔ Mar 12 '12 at 22:16

score 4 · Answer 4 · edited May 23 '17 at 12:00

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?

score 2 · Answer 5 · answered Mar 12 '12 at 22:15

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

Kristian · Answer 6 · 2012-03-12T22:20:45.033

0

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

edited Mar 12 '12 at 22:20

answered Mar 12 '12 at 22:09

Kristian

21,204
19
101
176

1

It doesn't really have anything to do with valid markup. It's more the patterns that jQuery's regex searches when determining if an empty element is intended, which will cause jQuery to use `document.createElement()`. If anything more is added, then `.innerHTML` will be used, and validity will be more important. – Mar 12 '12 at 22:14

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

6 Answers6

Linked

Related