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

Stefan Cutajar
Stefan Cutajar
7,747 Points
Posted by Stefan Cutajar
Stefan Cutajar
7,747 Points

Cant figure out whats wrong with the challenge .prepend

I' am trying to complete the following challenge however Im getting a bummer message however when i press preview button it seems the name is added to the list

Question ---> In app.js, use jQuery to create a new <li> element containing the student name "Sam Smith", and save your new element to a variable called $newStudent.

Answer ---> var $newStudent = $('.student-list').prepend('<li>Sam Smith</li>');

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 
In app.js, use jQuery to create a new <li> element containing the student name "Sam Smith", and save your new element to a variable called $newStudent.
var $newStudent = $('.student-list').prepend('<li>Sam Smith</li>');

1 Answer

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

I see a few issues:

  • in task 1, you create the element and store it into the variable, no reference to existing code will be made
  • in task 2, you will use the variable to add the element to the document, the variable itself should not change
  • the instructions for task 2 say to append the element (not "prepend").
  • it looks like a chunk of instruction text got added to "app.js", which will cause a syntax error
Stefan Cutajar
Stefan Cutajar
7,747 Points
Stefan Cutajar
Stefan Cutajar
7,747 Points

Thanks again for helping me once again. I'm still having issues with this one though.

This is the error I'm getting when I check work it still works however when I click the preview button. ----> Bummer! Did you call jQuery with the argument "<li>Sam Smith</li>"?

This is the code I wrote -----> const $newStudent = $('.student-list').append('<li>Sam Smith</li>');

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

Look at my first two hints again about the difference between task 1 and task 2. You'll most likely need two separate statements to complete task 2 without altering the value of the task 1 variable.

Stefan Cutajar
Stefan Cutajar
7,747 Points
Stefan Cutajar
Stefan Cutajar
7,747 Points

Thanks I did and it worked :D