JavaScript jQuery Basics Understanding jQuery Events and DOM Traversal Adding New Elements to the DOM

Rose Sore
Rose Sore
668 Points

append() what I'm I missing here?

The task is to append Sam Smith to the ul student-list. It's actually done that in the preview but it won't accept the answer.

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
const $newStudent = $('.student-list').append('<li>Sam Smith</li>');
Jorge Lopez
Jorge Lopez
Full Stack JavaScript Techdegree Student 14,825 Points

What you're doing in your app.js is storing the entire command into a const, but you're not calling it you're just storing it, so it's not going to execute. What the challenge wants you to do is store <li>Sam Smith</li> into a variable and then append it using that variable.

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

In this code you can see that I stored <li>Sam Smith</li> into the $newStudent variable and then I used thta variable with the append function in the next line. I hope this helps!

1 Answer

Rose Sore
Rose Sore
668 Points

Thanks a lot!!! Makes perfect sense of course. I think I actually find it easier to write my own code from scratch than to do the challenges. But they're good practice. Totally appreciate your response :)