Why does using jQuery's .append() function with a jQuery object with an element name and an array in it as the single parameter work?

Question

I have a question about how jQuery's .append function works in the following segment of code that dynamically adds values to a select box:

for (var i=currentYear; i >= minYear; i--){
    $('#year').append($("<option/>", { value: i, text: i}));
}

I already know that this code does work, as I've used .append in this way before after finding similar code online during a google search. However, the webpage I found the similar code on ( https://stackoverflow.com/a/3155663/3120918 ) did not explain why it works. I ready the official jQuery documentation page on the .append function ( http://api.jquery.com/append/ ), but it did not say anything about passing in a single jQuery object containing both a self-closed option element and an array ( $("<option/>", {value: key, text: value }) ) as the single parameter to the append function. I was hoping that someone could explain to me how and why this works.

Answer 1

jQuery object containing both a self-closed option element and an array ( $("<option/>", {value: key, text: value }) )

Nah, that is a special form of the jQuery constructor for "creating elements" :

If a string is passed as the parameter to $() , jQuery examines the string to see if it looks like HTML [ and if it does ], jQuery attempts to create new DOM elements as described by the HTML.

[…]

The second argument to jQuery() can accept a plain object consisting of a superset of the properties that can be passed to the .attr() method.

Important : If the second argument is passed, the HTML string in the first argument must represent aa simple element with no attributes. As of jQuery 1.4, any event type can be passed in, and the following jQuery methods can be called: val , css , html , text , data , width , height , or offset .

[…]

So what does happen here is the construction of a new <option> element with given value and text, which is wrapped in a jQuery collection. This is then passed to append , which (as usual) appends all elements from the collection to its elements - in here, the new option to your #year <select> element.