Jquery - Selector $(
) and $(
) difference

Question

What is the difference between appending to the element with

$('#my_parent_element').append('<div>');

or

$('#my_parent_element').append($('<div>'));

And

$('#my_parent_element').append('<div/>');

or

$('#my_parent_element').append($('<div/>'));

What is the purpose of this slash /.

And what is the purpose of convert this element to jQuery element with $ ?

Why jQuery enable to append elements this way ?

possible duplicate of [$('') vs $('') in jQuery](http://stackoverflow.com/questions/9675487/element-vs-element-in-jquery) — Andreas Louv, Oct 09 '12 at 16:06
possible duplicate of http://stackoverflow.com/questions/10402567/jquery-div-vs-div — Andreas Louv, Oct 09 '12 at 16:06

Kevin B · Accepted Answer · 2012-10-09T15:59:49.460

4

One is complete valid code and guaranteed to work in all browsers now and in the future, and the other is incomplete and may not work in some edge case situation.

To be clear, you want '<div/>'

jQuery can only create/manipulate elements, not opening and closing tags. Once processed and in the DOM, elements are no longer represented by opening and closing tags, they are represented as nodes in a tree structure.

As far as .append("<div />") vs .append( $("<div />") ), there is little if any difference between the two. Both perform the same action.

The "<div>" vs "<div />" is well documented in the api. http://api.jquery.com/jQuery/#jQuery2

"<div>" vs "<div/>" is a very simple case that "should" work in all browsers now and in the future, however if you get more complex, that's where you will run into trouble with cross-browser differences in how html is parsed.

edited Oct 09 '12 at 15:59

answered Oct 09 '12 at 15:54

Kevin B

94,570
16
163
180

1

I'm not saying you're wrong, but `[citation-needed]` for completeness. Probably something from here... http://api.jquery.com/jQuery/#jQuery2 – Matt Ball Oct 09 '12 at 15:56
In this particular case of "
" vs "
" there is no difference, however `'
'` for example may result in different nodes being generated in different browsers.
– Kevin B Oct 09 '12 at 16:03
How is `
` valid code? Which HTML doctype would see this as valid? – I Hate Lazy Oct 09 '12 at 16:15
@user1689607 i'm using valid loosely, it is valid in that every browser will treat it the same regardless of where it is in an html string (within reason). – Kevin B Oct 09 '12 at 17:11
@user1689607: If you're not asking about strings as they are being passed to jQuery here, but rather in terms of markup validity, then all flavors of HTML see it as valid. [It just doesn't do what you expect outside of XHTML](http://stackoverflow.com/questions/3558119/are-self-closing-tags-valid-in-html5). – BoltClock Oct 09 '12 at 17:14
@BoltClock: And that's really my main, albeit implicit, point. HTML validity isn't a concern. The syntax requirements of the jQuery API are the only determination of validity in this case. There's no consideration of what a browser now or in the future will consider valid. – I Hate Lazy Oct 09 '12 at 17:18
@user1689607 Since jQuery uses `.innerHTML` when more than one html element is involved, how the browser interprets the html string definitely matters. Am i missing your point? or are you just arguing for the sake of arguing. – Kevin B Oct 09 '12 at 17:24
@KevinB: Again, my point is that we need to follow the API. Yes, in that case valid markup is required *(we shouldn't rely on browser fixes)*, but that doesn't apply to creating a single, empty element. – I Hate Lazy Oct 09 '12 at 17:27
...no I'm not arguing for the sake of arguing. I'm referring to your spurious claim: *"To be clear, you want `'
'`"* – I Hate Lazy Oct 09 '12 at 17:28
Have read this and the citation and I still don't know what, if any, is the difference between the two. Other than a mandatory `To be clear, you want '
'` I don't see any reasonable argument in favor of
. The link provided does not say anything about
being better than
.
– Marc Compte Mar 02 '17 at 09:17
if using nothing but the div alone, there is no difference. – Kevin B Mar 02 '17 at 14:41

Luca Rainone · Answer 2 · 2012-10-09T17:07:19.110

3

It's the same:

From jquery source in constructor method

// Match a standalone tag
rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>|)$/,


jQuery.fn = jQuery.prototype = {
    constructor: jQuery,
    init: function( selector, context, rootjQuery ) {
    //cut
            if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
            // Assume that strings that start and end with <> are HTML and skip the regex check
            match = [ null, selector, null ];

            }
    //cut
            // scripts is true for back-compat
            selector = jQuery.parseHTML( match[1], doc, true );
            if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
                    this.attr.call( selector, context, true );
            }
    // cut
    }
    //CUT
    parseHTML: function( data, context, scripts ) {
        // Single tag
        if ( (parsed = rsingleTag.exec( data )) ) {
            return [ context.createElement( parsed[1] ) ];
        }
    }

As you can see the rsingleTag regexp match both <div/> and <div> and the first control check only the start < and end > char for string length >=3.

the parseHTML method again exec the regexp so the selector is the name of tag.

edited Oct 09 '12 at 17:07

answered Oct 09 '12 at 16:18

Luca Rainone

16,138
2
38
52

2

+1 Because you're right, it is the same. Although documentation is more authoritative than source code. And the documentation shows that both forms are considered equal. – I Hate Lazy Oct 09 '12 at 16:20
I've edited before your comment :-) You're right – Luca Rainone Oct 09 '12 at 16:21
I actually disagree with your edit a little. The docs allow both the `
` and `
` forms. One isn't more valid than the other. *"When the parameter has a single tag (with optional closing tag or quick-closing) — `$('')` or `$('')`, `$('')` or `$('')` — jQuery creates the element..."*
– I Hate Lazy Oct 09 '12 at 16:23
mmmh I'm not sure... from doc `When the parameter has a single tag (with optional closing tag or quick-closing) — $('') or $(''), $('') or $('')`. (with optional closing). – Luca Rainone Oct 09 '12 at 16:25
Yep, that's what I mean. They explicitly allow both forms. The key is that there are 3 types of syntax that jQuery recognizes for creating a single element. So it's not really a question of HTML validity, but rather jQuery API requirements. – I Hate Lazy Oct 09 '12 at 16:26
oh ok... I thought the `with optional closing tag` meant to html valid tag with optional closure. – Luca Rainone Oct 09 '12 at 16:29

Carlos Martinez T · Answer 3 · 2012-10-09T16:04:23.953

I don't think there is much different between either of those 4 options. jQuery is just flexible when handling parameters sent.

There is no difference between between those when there is only 1 tag.

However, you should understand the difference between:

<div><span class="inner"> and <div/><span class="inner"/>

The first one generates:

<div><span class="inner"></span></div>

and the second one:

<div></div><span class="inner"></span>

Jquery - Selector $() and $() difference

3 Answers3

Jquery - Selector $(
) and $(
) difference