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

Posted by Stephen O'Connor
Stephen O'Connor
22,291 Points

Why do you not close html tags when using $('<li>') - for example?

Lets say I have the following code:

$('<li>').text('Hello World').prependTo('.list')

Why do you only use the opening tag and not the closing tag?

Thanks.

3 Answers

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Hi Stephen O'Connor

Your code is correct. jQuery is a very flexible tool. In particular the $() method can be used to select elements, create elements or simply to run a function when a page's DOM loads.

The programmers behind jQuery built it that way to make jQuery easy to use and flexible for different situations.

So you can create a new list item like this:

$('<li></li>')

or like this:

$('<li>')

This does seem like some weird magic, but you have to understand that jQuery is just parsing a string anyway -- neither of those arguments are REALLY HTML elements. jQuery reads in the string then creates the element after it parses the string. To make the process easier for us programmers, the jQuery developers just decided that the closing tag was an optional part of the argument.

You can read more about using the $() method to create DOM elements here: http://api.jquery.com/jQuery/#jQuery2

Stephen O'Connor
Stephen O'Connor
22,291 Points

Thanks for the clarification Dave, I appreciate it. I didn't think my code was wrong but just wondered why it was ok to use both scenarios.

Thanks again. Stephen.

Dave McFarland
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

No problem Stephen. Glad I could help.

Ross Ewing
Ross Ewing
2,036 Points
Ross Ewing
Ross Ewing
2,036 Points

You're currently specifying a selector of <li> which is incorrect.

This is what you want:

$('<li>Hello World</li>').prependTo('.list');

a use of this would be:

$(window).load(function() {
                $('<li>Hello World</li>').prependTo('.list');
            });

It's how i would do it anyway!

Stephen O'Connor
Stephen O'Connor
22,291 Points

Thanks for your responses Ross. I only ask because I have seen it done both ways, with and without the closing tag. I just wondered why we might use one over the other.

Ross Ewing
Ross Ewing
2,036 Points
Ross Ewing
Ross Ewing
2,036 Points

Your code is incorrect:

$('<li>').text('Hello World').prependTo('.list')

$('li').text('Hello World').prependTo('.list')

Stephen O'Connor
Stephen O'Connor
22,291 Points

I don't think it is Ross (but I might be wrong)... This is just an example, but it would be to add a new list item with the text 'Hello World' to a pre-existing unordered list with the class of list, not add 'Hello World' to a list item that already exits.