- Get and Set Content with textContent and innerHTML 8:00
- Change Element Attributes 5:50
- Modifying Elements 2 objectives
- Set Inline Styles with the style Property 9:38
- Create New DOM Elements 4:35
- Review Attributes and Element Creation 5 questions
- Append Nodes 4:52
- DOM Manipulation Review 3 questions
- Insert HTML at Specified Positions 3:39
- Remove Nodes 4:20
- Review Appending and Removing Nodes 5 questions
Preview
Video Player
00:00
00:00
Get and Set Content with textContent and innerHTML
8:00Learn two properties that provide ways to read and update content in the DOM, textContent, and innerHTML.
[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