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 Introducing jQuery Using text() and html()

Posted by Atri Banerjee
Atri Banerjee
3,431 Points

You've just learned how to use the jQuery methods text() and html(). Use the appropriate jQuery method to select the h1

You've just learned how to use the jQuery methods text() and html(). Use the appropriate jQuery method to select the h1 element by its class name and set its contents to "Student <span>Profile</span>".

index.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <h1 class="profile-header"></h1>
    <p class="profile-text"></p>

    <script
    src="jquery-3.2.1.min.js"></script>
    <script src="app.js"></script>
</body>
</html>
app.js 
$('.profile-text').text("I am a web developer");
Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

It doesn't look like you've written any code yet for task 3. At least please give it your best "good faith" try and then ask for help if you have trouble.

Raedawn Long
Raedawn Long
6,943 Points

I realized I forgot a closing parenthesis after I posted.

Thank you

11 Answers

Prsicilla Anesu Muzerengwa
Prsicilla Anesu Muzerengwa
12,577 Points
Prsicilla Anesu Muzerengwa
Prsicilla Anesu Muzerengwa
12,577 Points 
$('.profile-header').html("Student <span>Profile</span>");
Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

:warning: Explicit answers without any explanation are strongly discouraged by Treehouse and may be subject to redaction by moderators.

Dave Harker
PLUS
Dave Harker
Courses Plus Student 15,510 Points
Dave Harker
Dave Harker
Courses Plus Student 15,510 Points

Hi Atri Banerjee,

You're doing great! For the next part you'll need to:

select the h1 element by its class name and set its contents to "Student <span>Profile</span>"

The 'gotcha' here it seems is you need to remember to use .html() instead of the .text() you used in the previous task. Also, remember to leave your previous code in the .js file as this challenge continues on rather than replaces previous code.

Let's get to it.

select the h1 element by its class name

Selecting the h1 element is done just like the p element in the previous task, except you'll need to get the class name for the h1 element this time, and use that.

$(".class name here")

Now let's

set its contents to "Student <span>Profile</span>"

Remeber to use .html() instead of .text(). We can accomplish this with the following:

.html("string with HTML embedded here");

Now you'll just need to put that all together, and you've got it!

Happy coding,
Dave

Austin Jones
Austin Jones
8,305 Points
Austin Jones
Austin Jones
8,305 Points

The problem is that the task is just plain broken. It will not accept the correct answer...

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

Try creating a fresh question and including your code with it so folks can help you determine the issue.

harpreet singh gill
harpreet singh gill
2,559 Points
harpreet singh gill
harpreet singh gill
2,559 Points

$('.profile-header').html("Student<span>profile</span>");

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

Close, but you need a space between "Student" and "<span>".

Eyanjem Etta-Ashu
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Eyanjem Etta-Ashu
Full Stack JavaScript Techdegree Graduate 18,260 Points
Eyanjem Etta-Ashu
.a{fill-rule:evenodd;}techdegree seal-36
Eyanjem Etta-Ashu
Full Stack JavaScript Techdegree Graduate 18,260 Points

I had same issue but this worked don't put a between the code that goes in the html like this .html("Student<span>profile</span>").

Ivy Cerelle Gray
Ivy Cerelle Gray
21,328 Points
Ivy Cerelle Gray
Ivy Cerelle Gray
21,328 Points

$('.profile-header').html("Student <span>Profile</span>");

I typed in this, and I am getting an error. What am I doing wrong?

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

Leaving a question as an "answer" to someone else's question! :stuck_out_tongue_winking_eye:

But you may have erased your task 2 code when you did task 3. They both must be present to pass. If that's not it, start a fresh new question.

Ivy Cerelle Gray
Ivy Cerelle Gray
21,328 Points
Ivy Cerelle Gray
Ivy Cerelle Gray
21,328 Points

Haha. I didn't realize someone else asked the same question AND I "answered" it. And yes, I figured it out! I deleted the previous step. Oops! Thanks for answering my question!

Phillip Roberts
Phillip Roberts
991 Points
Phillip Roberts
Phillip Roberts
991 Points

It appears the correct solution to this problem is still broken. I've submitted the code below and getting the error Bummer: Did you call jQuery with the selector ".profile-text"?

$('.profile-header').html("Student <span>Profile</span>");

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

Perhaps you missed the instruction that said "Important: In each task of this code challenge, the code you write should be added to the code from the previous task."

Your line is correct for task 3, but it must be added after the line created for task 2 (and the task 2 line must still be there).

Kyle Salisbury
seal-mask
.a{fill-rule:evenodd;}techdegree
Kyle Salisbury
Full Stack JavaScript Techdegree Student 16,363 Points
Kyle Salisbury
.a{fill-rule:evenodd;}techdegree
Kyle Salisbury
Full Stack JavaScript Techdegree Student 16,363 Points

For those struggling on this, you need to keep $('.profile-text').text("I am a web developer"); above your answer of $('.profile-header').html("Student <span>Profile</span>");