Why doesn't using $select.text($option); instead of $select.append($option); work?

Hey Stewart,

text() and append() are two different methods. text() deals with strings of text data from HTML elements whereas append() can deal with strings of data or with HTML elements themselves.

text() either gets or sets the inner text of an element, such as what you see in between <option> tags. The select element has no text per se; the select element is dependent upon its option elements to supply the text that is displayed.

append() appends an element to another element as a child of that element (or appends string text as the very last line of that element). This means that the appended element goes inside the element that append() is called on as that element's last child element.

So, when you're calling the line:

$select.append($option);

You are placing the created option inside the select you created at the very end of the select. This can only be done by using methods such as append() or html() (although html() replaces all data within the element with the new data instead of adding to it like append() does).