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 sarah shelden
sarah shelden
8,332 Points

what am i missing?

thanks

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>');

4 Answers

sarah shelden
sarah shelden
8,332 Points

It won't let me update the post, but these were instructions for challenge.

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.

Samuel Ferree
Samuel Ferree
31,722 Points
Samuel Ferree
Samuel Ferree
31,722 Points

oh wow, been a while since I've use jQuery sorry, you can create elements with a simple call to $(), it looks like your code is correct, you're just declaring the variable as newStudent instead of $newStudent

// you could use 'var' instead of 'let' here, I just prefer to use let as my default
let $newStudent = $('<li>Sam Smith</li>');
sarah shelden
sarah shelden
8,332 Points
sarah shelden
sarah shelden
8,332 Points

Changing it from var to let passed the challenge. The next step was to append it.

Thanks Samuel!

Samuel Ferree
Samuel Ferree
31,722 Points
Samuel Ferree
Samuel Ferree
31,722 Points

You'll want to select the list element you're adding to first, then send the list item you're adding into a call to append.

The $() method of jquery is usually used first to select the dom element you'll be working with. Once you have that, you can call append on it to add a child. See the code below.

let listElement = $('ul'); // select the unordered list element
listElement.append('<li>Sam Smith</li>'); //add the new list item element as the last child of listElement

//as one line
$('ul').append('<li>Sam Smith</li>');
sarah shelden
sarah shelden
8,332 Points
sarah shelden
sarah shelden
8,332 Points

i tried that, and this is the error message I got back =/

Bummer! Did you call jQuery with the argument "<li>Sam Smith</li>"?

Lucas de Oliveira Neves
Lucas de Oliveira Neves
12,003 Points

Try this:

$('.student-list').append($newStudent);