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 Kaleshe Alleyne-Vassel
Kaleshe Alleyne-Vassel
8,466 Points

Why isn't this working when it works?

I have been instructed to add Sam Smith in an li tag to the list which has worked but when I check the work it doesn't. What have I done wrong?

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 
let $newStudent = $(".student-list");
$($newStudent).append("<li>Sam Smith</li>");
Adam N
Adam N
70,280 Points

are you on the first task or the second?

Kaleshe Alleyne-Vassel
Kaleshe Alleyne-Vassel
8,466 Points

I'm on the first

3 Answers

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

The instructions say to "create a new <li> element containing the student name "Sam Smith", and save your new element to a variable called $newStudent", but this code is using the "$newStudent" variable to store a reference to the list with the class of "student-list".

So while this code would effectively do the final job, it's not implemented in a way that satisfies the instructions for both tasks. A slight re-arrangement of your current code should make it pass.

Kaleshe Alleyne-Vassel
Kaleshe Alleyne-Vassel
8,466 Points

I did this based on what you and another commentor said: I let $newStudent = '<li>Sam Smith</li>'; $('.student-list').append($newStudent);

it works but I receive the error message:

Unexpected AST node type passed to processCallExpression method: Literal

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

Now "$newStudent " is being assigned with a plain string, but it should be a new element.

Enclose the string in "$()" to invoke jQuery to convert it to an element.

Alicia Taylor
Alicia Taylor
4,788 Points
Alicia Taylor
Alicia Taylor
4,788 Points

Have you checked the console for error messages? This might help to debug.

Kaleshe Alleyne-Vassel
Kaleshe Alleyne-Vassel
8,466 Points

There weren't any errors

Rich Donnellan
MOD
Rich Donnellan
Treehouse Moderator 27,696 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 Points

Hey Kaleshe,

I recommend starting over and reread carefully what the challenge is asking you to do. It wants you to store the list item'ed name in the variable and then append.

Check out the documentation for the proper .append() syntax: http://api.jquery.com/append/

Kaleshe Alleyne-Vassel
Kaleshe Alleyne-Vassel
8,466 Points

Based on what you just said I changed it around to

let $newStudent = '<li>Sam Smith</li>'; $('.student-list').append($newStudent);

it works but I receive the error message:

Unexpected AST node type passed to processCallExpression method: Literal