Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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