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.