Jquery - Selector $(<div>) and $(<div/>) difference [closed]

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 ?

Answer 1

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.

Answer 2

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.