$('<element>') vs $('<element />') in jQuery

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>

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

$('<element>') vs $('<element />') in jQuery

Related

Recent Posts