Question

I’m new to JQuery and trying to use it to dynamically build HTML based on results of a query for JSON objects. Anyways 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 seem to find any 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 someone refer me to documentation that explains the syntax with the comment above it?

Answer 1

See the jQuery documentation here. Specifically the section entitled:

Creating New Elements

This section contains details on the use of the jQuery( html, props ) overload, 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 props object argument.