Why do people use slashes when creating elements?

Question

When people create elements with jQuery, I always see that they are doing something on the $(<div />) lines. What for? As far as I can tell, $('<div>') works just as well. Did I miss something?

Answer 1

It never matters.

jQuery (eventually) applies the following regular expression to decide if the string you passed is the "single tag":

 /^<(\w+)\s*\/?>(?:<\/\1>)?$/ 

If the string you pass matches this regular expression, jQuery just takes the subpattern (\w+) (tag name) and passes it to document.createElement() .

<div> , <div /> , <div/> and <div></div> all match this pattern, so they are all handled in exactly the same way: as createElement('div') .

Answer 2

This is the syntax for a self-closing tag. A <div> should not be self-closing, but in this case it does not matter. jQuery supports it and it gets rendered in the same way.

 $("<div>") // = <div></div> $("<div />") // = <div></div> $("<div></div>") // = <div></div> 

See this SO question for more details:
Why is this jQuery link '$ ("<div />")' instead of '$ (<div> </div> ")'?

Answer 3

No, you did not miss anything. jQuery will happily take this and display the corresponding tag. I think a lot of people are confused because the docs suggest using an XHTML-compatible element.

However, according to some people, jQuery does not pass this directly to document.createElement() . Rather, it runs the regex (or at least the last time I checked), and computes what actually goes to document.createElement() .

What it seems to me is that there is no right or wrong way to create an element, since you are actually passing a string representation of some HTML element. Mr. Resig could just as easily have used $('div'); or $('HTML:DIV'); , or what he felt at that time. Instead, he decided to use an “HTML-like string that will correctly translate this regular expression into actual HTML”, and as such, all of the following values ​​are equally valid:

 $('<div>'); $('<div/>'); $('<div></div>'); 

... and are valid not because they may or may not meet XHTML requirements, but because the regular expression used can turn this into a valid HTML element.

Answer 4

Provides compatibility between browsers. Some browsers may fail if the elements of the container are not closed <div></div> or quickly closed <div /> . This is optional for non-container <img> elements <img>

See http://api.jquery.com/jQuery/#jQuery2 for details.

Correction

In <div></div> , <div/> and <div> jQuery parses it and uses document.createElement. For something more complex, like <div style="display:none" /> or <div><b></b></div> , it will use innerHTML to create the element. In this case, the container elements require the correct closing and nesting of tags and optional for non-container elements. If they are excluded, the code may fail in some browsers.

Since you can at some point add attributes or children to the HTML string, it is probably best to use tag closing practices to avoid unexpected errors.

Answer 5

You can use <div></div> or just <div/> . They are the same. The last one is less detailed.

Below is the documentation on closing the tag: W3C . See 3.2.1

Same thing in HTML5 . See 8.1.2.2.

In html you need to close the tag. You have two ways to do this.