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
Learn two properties that provide ways to read and update content in the DOM, textContent, and innerHTML.
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
[MUSIC]
0:00
Hi everyone! It's time to start shaking
things up a little more in our daily
0:09
tasks web app, starting with
how to read and change content.
0:14
In this video,
I'll teach you two DOM element properties,
0:17
textContent and innerHTML.
0:22
Each provides a different way to read or
update content in the DOM.
0:24
You're going to learn when it might be
best to use one property over the other.
0:29
First, let's look at
the textContent property,
0:33
which enables you to read or set
the textContent of an element in the DOM.
0:36
By textContent, I'm referring to
only the text inside the element and
0:41
not the HTML tags.
0:47
Let's quickly examine how this
property works in the browser
0:49
console by selecting the h1 element and
reading its text.
0:54
I'll open up the console and
first select the h1
0:58
using document.querySelector('h1').
1:03
Then return its textContent
with .textContent.
1:10
Press Enter and
we get the heading's text back.
1:16
If we assign a string to textContent,
we can also change the heading text.
1:19
For example, I'll use the equal sign (=) or
the assignment
1:24
operator to assign textContent the string,
"This is a new heading".
1:29
I'll press enter and
the heading text updates on the page.
1:36
Now let's move back into our workspace and
1:39
use textContent to make our
page a little more interesting.
1:42
We'll add a text input field
to change the heading text.
1:46
In index.html, you'll notice a label and
1:51
input element commented
out inside the header.
1:54
Let's uncomment them to display
the text input field on the page.
1:57
For this project demo, the label is
visually hidden from the page using
2:04
CSS but still readable by screen readers.
2:08
In many cases, it's helpful to have
the label present, especially as you want
2:11
your content to also be accessible to
those with cognitive disabilities.
2:16
More about this in the teacher's notes.
2:20
Next, in app.js, we're not going to
need the example for...of and for loops,
2:23
as well as the items and
highlights variables moving forward, so
2:29
I'm going to delete these.
2:33
Don't worry, you can access and
2:35
review all the code written in this
course by downloading the project files.
2:37
Let's start by selecting the new input
element and assigning it to a variable.
2:41
We've already set up an event listener on
this update button to listen for clicks.
2:46
Currently the function updates,
the heading's border and font size styles.
2:52
Let's update this event listener function
to set the heading's textContent to
2:56
the value entered into the text
field on click Inside the function,
3:01
I'll declare a locally scoped
variable named input and
3:09
assign it the input element
using document.querySelector().
3:14
The input element has
a class of input-main, so
3:23
I'll pass the method,
the string '.input-main'.
3:28
I'm declaring this variable and assigning
it an element within the function scope,
3:34
so that we can reference it
inside this function only.
3:40
Remember, a variable in the global
scope can be accessed and
3:44
in some cases updated from
anywhere in the program,
3:47
which as you've learned in previous
courses could create problems.
3:50
Declaring the variable in the function
also provides better code readability and
3:55
maintenance.
4:00
So for those reasons, let's also move the
headline variable declaration inside this
4:01
function. When the button is clicked,
4:06
we'll get the text input value and
use it to set the heading text.
4:14
To get the value of a text input field,
you use the "value" property.
4:20
For instance, input.value is going to
read the value typed into this new field.
4:25
For example, if I log this to the console,
4:36
then in the browser, type, Hello console
4:40
into the text field and click the button.
4:45
We see Hello console
logged to the console.
4:50
Back in my function,
I'll update the heading text by setting
4:57
the heading's textContent
property to input.value.
5:01
With headline.textContent = input.value.
5:05
Let's save the file.
5:13
Go to the browser and refresh.
5:15
Now type in this field, for example,
5:18
"Hello headline" and click the button.
5:22
And that updates the heading text.
5:25
Good, now we're interacting with
the heading element in the DOM.
5:27
Notice the text I typed into this
input isn't getting cleared after
5:32
clicking the button.
5:37
Inside the event listener's function,
I'll clear the input field as soon as
5:38
the headline text gets updated by setting
the value attribute of the input element
5:43
to an empty string.
5:49
This clears the text field upon clicking
the button and updating the heading.
5:54
The innerHTML property offers
another way of altering content.
6:02
The main difference between innerHTML and
textContent is that
6:06
innerHTML can do a whole lot more
than get or set text content.
6:11
innerHTML gets or sets the actual HTML
markup contained within an element.
6:16
We used innerHTML at the beginning
of the course for instance,
6:23
to replace the inner HTML of the body
with a heading that read Hello world.
6:27
It may also look familiar because you've
used it in previous courses to add or
6:31
replace HTML inside an element
dynamically with JavaScript.
6:36
For example, in the browser,
6:40
I'll select the ul elements in the console
6:44
with document.querySelector('ul').
6:49
I can access all the HTML markup within
the ul element with .innerHTML.
6:54
This returns a string of all
the li elements inside the ul.
7:02
And what's more, setting the ul's
7:07
innerHTML property to
a string of HTML tags,
7:11
like, li tags with the text "Read a book"
7:16
replaces the ul's child
contents with that markup.
7:21
So now there's only one
list item within the ul,
7:26
because I replaced all
the contents with this new HTML.
7:30
All right, you've learned how
to alter the text content and
7:35
inner HTML of an element in the DOM.
7:39
I really encourage you to
experiment with getting and
7:41
setting the content of
various elements on a page.
7:45
For instance, visit your favorite website
and have a little fun making changes to
7:48
the content with JavaScript
in your browser console.
7:52
Next, we'll take a look at how to
change an element's attributes.
7:55
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