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

Anik Devaughn
Anik Devaughn
7,751 Points
Posted by Anik Devaughn
Anik Devaughn
7,751 Points

Challenge Task 1 0f 2: creating <li> and adding to the <ul> tag

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.

when i try to create this line of code, i am getting error, Please help ! var $newStudent = $('<li>Sam Smith</li>'); //$('.student-list ul').append( $newStudent);

Error: Bummer! Did you call jQuery with the argument "<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 
var $newStudent = $('<li>Sam Smith</li>');
//$('.student-list ul').append( $newStudent);
Veljo Palanen
Veljo Palanen
29,914 Points

Code is fine but somehow the task dose not accept the $ sign front of the "$newStudent". -> this works: 

var newStudent = $('<li>Sam Smith</li>');
Gabbie Metheny
Gabbie Metheny
33,778 Points
Gabbie Metheny
Gabbie Metheny
33,778 Points

Veljo's right-- even though it's convention to name jQuery variables starting with a $, the challenge only specified newStudent, so that's the only variable it will accept.

7 Answers

David Ryan
PLUS
David Ryan
Courses Plus Student 14,981 Points
David Ryan
David Ryan
Courses Plus Student 14,981 Points 
const $newStudent = $('<li>Sam Smith</li>');

List Items saved to a variable called $newStudent...

It confused me to see think of putting the $ on both parts... But it works this way

Mariela Napoles
Mariela Napoles
13,434 Points
Mariela Napoles
Mariela Napoles
13,434 Points

Hello. This is my code on task 2 but it keep getting an error. :( please help me. Thank You!

const newStudent = $('<li>Sam Smith</li>');
$('.student-list').append(newStudent);
Vincentia Zwane
Vincentia Zwane
19,106 Points

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

Sergei Rudz
Sergei Rudz
9,688 Points
Sergei Rudz
Sergei Rudz
9,688 Points

Correct Answer:

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

murat sıcakkanlı
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree seal-36
murat sıcakkanlı
Full Stack JavaScript Techdegree Graduate 23,580 Points
murat sıcakkanlı
.a{fill-rule:evenodd;}techdegree seal-36
murat sıcakkanlı
Full Stack JavaScript Techdegree Graduate 23,580 Points

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

M Khan
M Khan
7,024 Points
M Khan
M Khan
7,024 Points

How it make sense ? The $ sign should be assigned with the variable not with the the value of it. confused

Frankline Ekane Ebong
Frankline Ekane Ebong
6,411 Points

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

it gives an error saying can't find the variable $newStudent.

But when I tried this:

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

It validated to well done.

Jose A Reynaldo Vazquez
Jose A Reynaldo Vazquez
21,313 Points
Jose A Reynaldo Vazquez
Jose A Reynaldo Vazquez
21,313 Points

This is good: var $newStudent = $("<li>Sam Smith</li>");

Shweta Singh
Shweta Singh
5,917 Points
Shweta Singh
Shweta Singh
5,917 Points

const $newStudent = $('<li>Sam Smith</li>'); works fine.

Anik Devaughn
Anik Devaughn
7,751 Points
Anik Devaughn
Anik Devaughn
7,751 Points

Thanks for the quick response, it works when I tried without the $ sign. var newStudent = $('<li>Sam Smith</li>');