How do I read this function?

Question

function showTweet(username) {
    $( "<ul/>", {
        "class": "my-user-list",
        html: usertweets[username].join( "<li/>" )
    }).appendTo( $("#tweets") );
}

So I see that the selector is targeting an unordered list, but what comes after the comma and why is it in curly brackets?

I understand the .append portion. I do not understand what "class": "my-user-list" and html: usertweets[username].join( "<li/>") do. Note that usertweets is an array.

Any insight would be greatly appreciated!

Answer 1

The selector is not targeting a ul - it is creating one. The second parameter is an object that contains the properties to set on the new ul element. It is then added to the DOM by appending it to the #tweets element.

To show the difference:

// to create a ul element in memory
$('<ul></ul>'); // or...
$('<ul />');  

// select all ul elements currently in the DOM
$('ul');