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 Understanding jQuery Events and DOM Traversal Adding New Elements to the DOM

Posted by Zach Freitag
Zach Freitag
20,341 Points

Use jQuery to append your new element to the unordered list with the class of student-list.

I'm lost on this one, brain fart maybe?

Help is appreciated!

index.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <h2>Student List</h2>

    <ul class="student-list">
        <li>James McAvoy</li>
        <li>Alena Holligan</li>
        <li>Wade Christensen</li>
        <li>Matt Krzyzynski</li>
    </ul>

    <script
    src="jquery-3.2.1.min.js"></script>
    <script src="app.js"></script>
</body>
</html>
app.js 
var $newStudent = $('<li>Sam Smith</li>'); 

$ append('.student-list');

//     <ul class="student-list">

2 Answers

Steven Parker
Steven Parker
229,783 Points
Steven Parker
Steven Parker
229,783 Points

You've got the selector, and the "append", but you still need a reference to the element being added, and they all need to be re-arranged a bit. The selector is used to create a jQuery object, then you use the "append" method of the object and pass your new element as the argument:

$('.student-list').append($newStudent);
Zach Freitag
Zach Freitag
20,341 Points

Great answer. I'm super impressed with your 95,000 points by the way!

Zach Freitag
Zach Freitag
20,341 Points

That was a tough call,

You both gave great answers but Dale was 2 minutes before you.

I figured it would be "best etiquette" to give "Best Answer" to the first answer that was good.

Steven Parker
Steven Parker
229,783 Points
Steven Parker
Steven Parker
229,783 Points

That's a good practice, but you may have misinterpreted the times.
If you hover your mouse over the "ago" time it will show you the exact time each message was given.

Zach Freitag
Zach Freitag
20,341 Points

Sorry for the confusion,

I just asked another question that I'm confused on and I'll give you first dibs:

Modify this object so it uses two properties firstName and lastName and remove their variable declarations

JavaScript | Object-Oriented JavaScript | Introduction to Methods | Understanding this

Zach Freitag
Zach Freitag
20,341 Points

Done. I'm a rookie with the question feature on this site, this was my first question, but things are starting to get challenging on the Full Stack JavaScript Track.

Alex Davis
Alex Davis
35,050 Points

Thanks for your answer! I was stuck trying to figure out what I had done wrong and I mistakenly added quotes around $newStudent

Dale Severude
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Dale Severude
Full Stack JavaScript Techdegree Graduate 71,349 Points
Dale Severude
.a{fill-rule:evenodd;}techdegree seal-36
Dale Severude
Full Stack JavaScript Techdegree Graduate 71,349 Points

Hi Zach,

Use jQuery to select .student-list, then call the append method with $newStudent as a parameter.

$('.student-list').append($newStudent);
Zach Freitag
Zach Freitag
20,341 Points

Thanks Dale,

I way over thought this and it's been a year since I used jQuery so I moved through this lesson to quickly.