CODEWITHSUNDEEP
javascriptjqueryhtml
Matvey
Matvey

Reputation: 387

In the following example, is "<ul/>" a typo or does it have special meaning?

The documentation for getJSON (https://api.jquery.com/jquery.getjson/) has the following bit of code:

$( "<ul/>", {

Which looks like it should perhaps be </ul> instead? Or is there a special meaning to this, like it being a shortcut for something, or maybe the slash is used as an escape character?

$.getJSON( "ajax/test.json", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val + "</li>" );
  });

  $( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "body" );
});

Upvotes: 1

Views: 217

Answers (2)

Jack Bashford
Jack Bashford

Reputation: 44125

It's a jQuery thing - see my answer here for more information. Essentially what it does is it creates an opening and closing <ul></ul> tag, but it's more concise. I have modified my linked answer to show how your example works. Start with this JS:

document.createElement("ul");

And then, you can jQuery it like so:

$("<ul></ul>");

And because it's jQuery, and it gets more and more concise, it eventually becomes its compact, self-closing, notation:

$("<ul/>");

Another reason you have the self-closing tag is because it's an empty element - it's got no children. So the reason it's a self-closing tag is because it's a sign you're creating an empty element.

Here's what each bit of the code does:

$( "<ul/>", {...})

This, as shown above, creates an empty <ul></ul> element.

"class": "my-new-list"

This adds the class my-new-list to the element, so it looks like:

<ul class="my-new-list"></ul>

This line:

html: items.join("")

Sets the innerHTML property of the <ul></ul> element to be the items array concatenated into a single string.

And finally, this line:

.appendTo("body");

Appends the element to the body of the page. By now, our element looks like:

<ul class="my-new-list">TheItemsArray</ul>

And it gets inserted at the very end of the <body> element, right before the closing </body> tag.

Upvotes: 4

Yi Chen Chong
Yi Chen Chong

Reputation: 93

In HTML, <tag/> is referred to as being something called a "self-closing tag", which is when an item can actually be stand-alone. For example, in the original HTML, one would write an image as <img/> (even though <img> also works).

Therefore, <tag/> means that the tagged element does not require opening or closing tags, because it simply wouldn't make sense to have opening or closing tags, or simply when there isn't anything inserted in between. For example, the reason that <img/> is a self-closing tag is because it wouldn't make sense to insert something into an image between opening and closing tags.

This same idea can be applied to the <ul/> item in JQuery. When creating an empty ul element, the very definition of empty means that there is nothing to be inserted in the ul element yet, so JQuery just goes ahead and initializes it as <ul/>.

By contrast, the idea of it being a typo for </ul> would not make sense in the code, because </tag> means a closing bracket, and there was no opening bracket mentioned.

So, in conclusion (tl;dr), <tag/> is an actual thing in HTML, and refers to a self-closing element.

Upvotes: 1

Related Questions