JQuery syntax

Question

I am new to jQuery and am trying to use it to dynamically build HTML based on query results for JSON objects. Anyway, on the jQuery API site (http://api.jquery.com/jQuery.getJSON/) I found this example where I don’t understand the syntax and I can’t find an explanation of why this syntax is legal or how to use it .

$.getJSON('ajax/test.json', function(data) { var items = []; $.each(data, function(key, val) { items.push('<li id="' + key + '">' + val + '</li>'); }); // *** THIS IS THE PART THAT IS WEIRD *** $('<ul/>', { 'class': 'my-new-list', html: items.join('') }).appendTo('body'); }); 

Can anyone refer to the documentation explaining the syntax with the comment above?

Answer 1

See jQuery documentation here . In particular, the section entitled:

Create new items

This section contains information on using jQuery( html, props ) overload jQuery( html, props ) , added in version 1.4. This is the overload used in your example. It takes an html string argument, which is used to create a new DOM element, and then adds the attributes contained in the argument of the props object.

Answer 2

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

This simply creates a new UL element with the class "my-new-list" and the contents of the elements. He will create such a structure as:

 <ul class='my-new-list'> <li id="key1">val1</li><li id="key2">val2</li><li id="key3">val3</li> </ul> 

This is just a short hand for:

 $('<ul></ul>').attr('class', 'my-new-list').attr('html', items.join('')).appendTo('body'); 

Documentation: http://api.jquery.com/jQuery/#jQuery2

Answer 3

 $('<ul/>') 

Creates a new UL element not attached to the DOM

 $('<ul/>', {'class':'my-new-list'}) 

Sets the DOM variables for this element using a pair of key values. So now you have an UL element with the my-new-list class.

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

This takes an array of LI elements created above, connecting the elements together in a string (without a separator in this case .join('-') would put a hyphen between each LI element) and assign it an internal UL html.

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

Finally, it adds the newly created UL element with this child LI element to the BODY element, making it visible on the page.

Answer 4

Check out the documentation for jQuery ( $ ) . In particular, look at the part related to jQuery( html, props ) overload jQuery( html, props ) :

html A string defining a single, stand-alone, HTML element (e.g., or).

requisites : a map of attributes, events, and methods for calling a newly created element.

Further below there is additional information:

As in jQuery 1.4, the second argument to jQuery () can accept a map consisting of a superset of properties that can be passed to .attr (). In addition, any type of event can be passed, and the following jQuery methods can be called: val, css, html, text, data, width, height or offset. The name "class" must be indicated on the map because it is a reserved JavaScript word, and "className" cannot be used because it is an invalid attribute name.

Answer 5

This means that you are adding a <ul> element with the my-new-list class to the body. The <li> elements that you built in the items array are then added to the <ul> , so you get something like:

 <ul class="my-new-list"> <li id="key1">val1</li><li id="key2">val2</li>... </ul> 

Answer 6

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

In jQuery, in addition to finding DOM elements, you can also create them.

 $('<ul/>') // or $('<ul></ul>') 

This creates new <ul> elements and returns it as a jQuery object.

The object passed as the second parameter sets its attributes. Thus:

 <ul class="my-new-list"><li id="one">O Hai</li></ul> 

This <ul> then added to the body .

Answer 7

The part you don't understand is a completely different use of the $ function. In most cases, you use $ function as a selector that returns a set of jquery elements (dom nodes wrapped as jquery objects) that you can perform some kind of operation on.

In this case, instead, you use the $ function to create the DOM nodes (in fact, jquery objects), and then those objects on which you can execute functions such as appendTo in the example shown.

Pretty much equivalent to writing something like

 var node = document.createElement("ul"); node.setAttribute("class", "my-new-list"); node.innerHTML = items.join(''); document.body.appendChild(node);