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

Brain fart! Need serious help!!!!!!

Tried everything, what on earth am I missing??? So frustrated!

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;
const $newStudent = $('<li>Sam Smith</li>')
$('.student-list').append("$newStudent");
//$('.student-list').append($newStudent);
//var $newStudent = $("<li>Sam Smith</li>").append(".student-list");
//$('.student-list').append($newStudent);
var $newStudent $('.student-list').append('<li>Sam Smith</li>');
Adam Doe
Adam Doe
28,485 Points

Remove the quotes where you are appending $newStudent.

1 Answer

As Adam mentioned, you're passing in a string to the append method. jQuery will see that as the literal string of "$newStudent" instead of as a variable.

Just remove the quotes:

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

and you're good.