Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics (2014) Creating a Mobile Drop Down Menu Perform: Part 1

Stewart Horsfield
Stewart Horsfield
13,293 Points

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

If we are using the text() method to insert the anchor text inside the < option > tags in $option, why does it not work to use text() to do essentially the same thing, inserting text, into the < select > tags in $select? I would have thought .append would put $option after the tags, not between them. What am I missing?

1 Answer

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:


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).

Stewart Horsfield
Stewart Horsfield
13,293 Points

Thanks Marcus, that's exactly the sort of explanation I was after. :)

Excellent! You're very welcome, Stewart. Happy Coding!