19

Possible Duplicate:
$('<element>') vs $('<element />') in jQuery

Which one of these two are the correct way to do it:

$('<div>')

or 

$('<div />')

They both seem to work. Is one way more right than the other, or do they both always work?

Community
  • 1
  • 1
qwertymk
  • 34,200
  • 28
  • 121
  • 184

4 Answers4

12

From the docs:

If a string is passed as the parameter to $(), jQuery examines the string to see if it looks like HTML (i.e., it has <tag ... > somewhere within the string). If not, the string is interpreted as a selector expression, as explained above. But if the string appears to be an HTML snippet, jQuery attempts to create new DOM elements as described by the HTML. Then a jQuery object is created and returned that refers to these elements. You can perform any of the usual jQuery methods on this object:

$('<p id="test">My <em>new</em> text</p>').appendTo('body');

If the HTML is more complex than a single tag without attributes, as it is in the above example, the actual creation of the elements is handled by the browser's innerHTML mechanism. In most cases, jQuery creates a new element and sets the innerHTML property of the element to the HTML snippet that was passed in. When the parameter has a single tag, such as $('<img />') or $('<a></a>'), jQuery creates the element using the native JavaScript createElement() function.

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>');
j08691
  • 204,283
  • 31
  • 260
  • 272
11

They produce identical results in jQuery.

Blazemonger
  • 90,923
  • 26
  • 142
  • 180
  • So they both always work for all elements? – qwertymk May 01 '12 at 18:50
  • Yes. The second form is valid XHTML/HTML 4, the first is HTML5, and jQuery will produce the same output either way. – Blazemonger May 01 '12 at 18:51
  • 1
    As far as I'm concerned... why not just do: $("div")? – cereallarceny May 01 '12 at 18:54
  • 4
    @cereallarceny That's a selector -- the OP is asking about creating new jQuery objects/DOM elements. – Blazemonger May 01 '12 at 18:56
  • @Blazemonger, where in HTML4 is the trailing `/` specified? It certainly doesn't appear in [3.2.1](http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.1) – Mike Samuel May 01 '12 at 18:57
  • 2
    doctypes really have nothing to do with it. jQuery simply uses a regex to see if an empty tag was passed. The regex will accept `
    `, `
    ` or `
    ` *(presumably with some allowance for white space)* irrespective of the element type, and if it's a match, it uses `document.createElement` to generate the element.
     –  May 01 '12 at 19:08
1

Though it seems they produce identical result, but based on uses they might not generate same result. For example:

While jQuery parse $('<div> <p>'), the <p> tag will be a children of the<div> tag, so the result would be: <div> <p></p> </div>

And while jQuery parse $('<div/> <p/>'), the <p/> tag will be a sibling of the <div/> tag, so the result would be: <div></div> <p></p>

Kibria
  • 1,865
  • 1
  • 15
  • 17
  • Good point about avoiding misunderstandings regarding what the code is doing. This is the only argument I saw for using the
    syntax and I will stick with it now. Even though it doesn't apply when doing just one element, it is still good to remain consistent throughout your code.     – Dovev Hefetz Jan 26 '16 at 08:22
0

Both variants give you same result but this

$('<div />', {id:"myID",class:"mycssClass class2 clazzz",some-attribute: "value"});

is better, more readable than

$('<div id="myId" class="mycssClass class2 clazzz" some-attribute="value"></div>');
maestr0
  • 5,318
  • 3
  • 28
  • 27