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 ?
summarize: $('<div/>') creates a new div element. $('div') selects all the div elements.
So far we have covered only three standard jQuery Selectors.
In jQuery, the $ sign is just an alias to jQuery() , then an alias for a function. This page reports: Basic syntax is: $(selector).action() A dollar sign to define jQuery. A (selector) to "query (or find)" HTML elements.
The jQuery Object: The Wrapped Set: Selectors return a jQuery object known as the "wrapped set," which is an array-like structure that contains all the selected DOM elements.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With