Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed jQuery Basics!
You have completed jQuery Basics!
Preview
Use the text() and html() methods to get or change content inside HTML elements.
Keyboard shortcut to open Chrome DevTools
- Mac: Command + Option + I
- Windows/Linux: F12 or Control + Shift + I
- Chrome DevTools Overview
Further Reading
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Providing information and messaging to
your user is a hugely important part of
0:00
creating interesting interactive websites.
0:04
jQuery offers a couple of different
methods that make it fun and
0:08
easy to create, change, update,
and modify text in HTML.
0:11
Let's look at these methods in action
by using them to make a blog previewer.
0:16
When we're finished with this project,
the user will be able to type a title and
0:20
a blog entry into this form.
0:24
When they click on the preview button,
0:27
what they've typed will display as
a preview over here on the right.
0:28
As a first step,
I'll show you how to use jQuery to get and
0:32
insert text or HTML onto a webpage.
0:35
For that, we're going to experiment
with the jQuery methods, HTML, and text.
0:38
The text method allows you to get,
insert, or change text
0:44
within the element you've selected,
while the HTML method allows you to get,
0:48
insert, or change HTML within
the element you've selected.
0:52
These kinds of methods are known
as getters and setters.
0:55
The HRML method without arguments is known
as a getter because it gets a value.
0:59
Using the HTML method
with no argument would
1:05
get any value that is within
the element we call it on.
1:08
The HTML method with arguments is known
as a setter because it sets a value.
1:11
So whatever HTML string we pass
to the HTML method will be set to
1:17
the element we call it on.
1:21
Let me show you what I mean.
1:23
In my blog previewer project
I'm going to open up
1:25
Chrome Dev Tools by inspecting
this new blog post, h1.
1:29
Don't worry if you're not super familiar
with Dev Tools, we'll just be using it in
1:34
this course to have a look at
the values jQuery returns to us.
1:39
If you're interested in knowing more or
need a refresher, see the teacher's notes.
1:42
I can see that this h1 has
a class of blogPage-title.
1:47
So in the console I'll select
this element by its class name,
1:52
then I'll call the text method on it.
1:55
And I'm returned the text
that's inside of the element.
2:09
The HTML method works
in much the same way.
2:13
I'll select this New Blog Post div,
and call the HTML method on it.
2:16
As you can see, this gives me all the HTML
that is nested within that element.
2:34
That's how you can get HTML or
text from an element.
2:43
But how would you add HTML or text?
2:48
We can also use these methods
to set our insert text,
2:50
or HTML, into existing elements.
2:53
Let me show you how.
2:56
Let's close this and open up the workspace
if you don't have it open already.
2:58
In the app.js file,
let's create a variable called title and
3:02
a variable called content.
3:05
Let's set title to, My First Blog Post.
3:13
And let's put some sample content
into the content variable.
3:21
This is my first post.
3:26
In index.html we see that
there's an h2 with the id of
3:30
blogTitlePreview and
a div with the id of blogContentPreview.
3:35
On our rendered page these elements
are over here on the right,
3:41
they're just not visible at
the moment because they're empty.
3:45
But we're about to change that.
3:48
Let’s select both of these elements with
jQuery and insert some content into them.
3:50
Underneath our sample content variables,
select the blogTitlePreview element.
3:58
Note that I’m using a hash here because
we are selecting and ID and not a class.
4:08
We can now use the jQuery text method
to set the text of this element.
4:14
So I'm selecting this h2 with
the id of blogTitlePreview and
4:22
inserting the contents of whatever is in
this variable title which is currently,
4:26
My First Blog Post.
4:32
You save, refresh the preview.
4:34
And you'll now see that
the text is within this h2.
4:37
Why don't you go ahead and
pause the video and
4:42
see if you can do the same thing
with the blogContentPreview element.
4:45
Use the text method to set
blogContentPreview's text to the value
4:49
of this content variable, then unpause and
I'll show you how I did it.
4:54
This was how I did it.
5:00
First I selected
the blogContentPreview element.
5:02
Then I set the text to
the content variable.
5:09
Let's save and refresh the preview.
5:16
And awesome,
that content is appearing on my page.
5:19
Note that we could also pass these
strings directly to the text method.
5:23
Like this.
5:28
Then we could comment these variables out.
5:36
And you'll see that this
works in much the same way.
5:39
Saving to variables is a bit nicer though
because it looks cleaner and because we
5:42
can keep our variables in the same place
making them easier to find and change.
5:46
So I'll go ahead and undo that.
5:52
So what happens if we put
HTML into the text method?
5:55
Let's see what happens by putting
a strong tag around the word, first.
5:58
When we save and refresh the page,
6:13
we can see the strong HTML element
is being rendered as plain text.
6:15
That's because jQuery's text method
doesn't interpret these tags as HTML.
6:19
To render HTML we'll need
to use the HTML method.
6:25
So in app.js change the second
method call to html.
6:29
Save, refresh to preview.
6:36
Now the word first is displayed in bold
because the strong element is now being
6:40
rendered as an HTML element rather
than as a string of plain text.
6:44
So far we've been
inserting sample text and
6:50
HTML into the preview section on the site.
6:53
In the next video, we'll start
getting into the really fun stuff,
6:56
how jQuery handles perhaps the most vital
component of webpage interactivity,
7:00
responding to user input.
7:05
We'll learn about a jQuery method
that will help us obtain and
7:07
display information captured from a form.
7:10
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up