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