This course will be retired on February 12, 2022. We recommend "JavaScript and the DOM" for up-to-date content.
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
In this video, you'll learn to read and change text using the DOM element properties textContent and innerHTML. You'll learn how each property has its own approach to the DOM.
[MUSIC]
0:00
All right, it's time to start shaking
things up a little more on the web page,
0:04
starting with how to read and change text.
0:08
In this video, I'll show you two DOM
element properties, textContent and
0:10
innerHTML.
0:15
Each has its own approach to the DOM, and
I'll explain when you'd want to use them.
0:16
So first,
let's look at the textContent method.
0:20
As with many of the methods I'll show you,
0:24
you can use textContent to either read or
set text values of elements.
0:27
And to follow along with me,
launch the workspace for this video or
0:32
you can download the project files and
use your preferred text editor.
0:34
So in the latest project files,
0:39
the index.html file is similar to
the one from the previous stage,
0:40
except that I've removed the list items
with the class error, not purple.
0:44
And we have a blank app.js file.
0:49
But again, you can still view all the code
written up to this point when you download
0:52
the project files.
0:55
So now let's see how to use the text
content method to do just that,
0:57
return the text content of a node.
1:01
So I'm on the web page
we've been working on.
1:04
And I have my console open.
1:07
So I'm going to select the heading
element and get its text.
1:09
I'll assign the element to the variable
myHeading using querySelector.
1:14
So I'll type document.querySelector,
then pass the h1 selector.
1:21
So first, let's read the heading
with myHeading.textContent.
1:31
And, as you can see, we get the heading's
text back, JavaScript and the DOM.
1:38
Now if we assign a string to textContent,
we can also change the heading text.
1:42
So let's change it by typing
myHeading.textContent
1:48
= "This is a new heading".
1:54
So now let's move into our workspace and
2:01
use textContent to make our
app a little more interesting.
2:03
Let's create an input to change
the kind of list we're making.
2:07
So in index.html,
2:10
I'm going to add an input and
button element below the paragraph.
2:12
And I'll give both elements
the class description.
2:17
Right below the input, I'll add
a button with the class description.
2:29
The button will say,
Change list description.
2:37
And I'm also going to give the second
paragraph here the class description.
2:43
So now over in app.js, let's select the
elements we'll need, namely the paragraph,
2:52
text input, and button, and
assign them to const variables.
2:57
So first, I'll select the input with const
3:02
input = document.querySelector('input').
3:07
Then I'll go ahead and copy this,
paste a new one below,
3:15
and change it to const p
= document.querySelector.
3:21
Now, since there's more than one
paragraph element on the page,
3:26
we'll use the class description
to select just the one we want.
3:30
I'll paste another one right below,
and this one will say,
3:39
const button =
document.querySelector('button');.
3:43
So next, right below, I'll call
addEventListener on button to listen for
3:51
when the button is clicked.
3:56
And when the button is clicked,
4:08
we'll use the value of the text input to
set the paragraph's textContent property.
4:10
So inside,
we'll say p.textContent = input.value.
4:16
And let's also add a colon to the end
of the input value by typing plus and
4:23
then a semicolon inside a set of quotes.
4:28
All right, so let's save our file,
go over to the browser, and refresh.
4:33
So now let's type something in this field.
4:39
Let's say Blue items.
4:42
And click the button.
4:46
And now we have a list
description of blue items.
4:48
And notice that a colon
was placed at the end.
4:51
Great.
4:53
So there's one more way of altering
content I want to show you,
4:55
called innerHTML.
4:58
So let's hop over to app.js and
5:00
just swap out text content with innerHTML.
5:04
So back in the browser, we see that
it functions exactly the same way.
5:14
I'll type blue items, and
the paragraph text changes to blue items:.
5:18
However, innerHTML can do
more than just handling text.
5:24
As its name suggests, it can also read and
alter the elements on a web page.
5:29
You can read and replace everything
between an element's opening and
5:34
closing tag.
5:37
So for example, let's select
the UL element in the console and
5:39
store it in a variable.
5:44
So we'll say let ul =
5:45
document.querySelector('ul').
5:50
And now if we call innerHTML on the ul,
5:59
it gives us a string of the HTML
code within the ul element.
6:03
Then if we were to set this list
to a string of HTML tags and
6:10
text, we would replace the ul's
content with that HTML.
6:14
Let's see how that works.
6:18
So back in the console,
I'll type ul.innerHTML =,
6:20
then inside the quotes, I'll add
opening and closing list item tags.
6:25
Inside the tags, I'll write, red cabbage.
6:33
So now when I hit Enter and check out the
page in the browser, we see that there's
6:38
just one list item, because we replaced
all the list contents with this new HTML.
6:44
All right, so well done.
6:51
Now that we can alter textual content,
6:52
let's have a look at how to change
the attribute of an element.
6:55
You need to sign up for Treehouse in order to download course files.
Sign up