WEBVTT

00:00:00.718 --> 00:00:06.893
We've already used `innerHTML` quite a bit
here, but I want to quickly show you

00:00:06.893 --> 00:00:08.885
a little more about it.

00:00:08.885 --> 00:00:14.021
First, let's look at our example,
right here where we set `innerHTML`.

00:00:14.021 --> 00:00:17.992
I've just passed in a string,
"all about cats".

00:00:17.992 --> 00:00:22.176
But, in fact, I could put HTML tags
inside that string.

00:00:22.176 --> 00:00:26.565
So I could surround "cats"
with `` tags,

00:00:26.565 --> 00:00:29.373
and you can see it shows up emphasized.

00:00:29.373 --> 00:00:32.649
Or down here, where I
change "dog" to "cat",

00:00:32.649 --> 00:00:36.152
I could surround this
with `` tags,

00:00:36.152 --> 00:00:39.007
and it shows up strong, bold.

00:00:39.007 --> 00:00:44.148
I could even write an `` tag
inside here, or put an entire webpage's

00:00:44.148 --> 00:00:47.842
HTML in here, if I really wanted.

00:00:47.842 --> 00:00:53.592
So that's pretty neat, because it means
we can do a lot with `innerHTML`.

00:00:53.592 --> 00:00:59.072
If we're only changing the text, actually,
we don't even need to use `innerHTML`.

00:00:59.072 --> 00:01:03.922
We can just use the `textContent`property,
and that means that browser

00:01:03.922 --> 00:01:09.131
won't interpret what you pass as HTML,
and will just render it as plain text.

00:01:09.131 --> 00:01:12.196
Notice if I change this to `textContent`,

00:01:12.196 --> 00:01:14.992
my brackets show up-- gross!

00:01:14.992 --> 00:01:19.085
So, in that case, we're just going to
get rid of them, because the browser

00:01:19.085 --> 00:01:22.524
refuses to turn them into actual HTML.

00:01:22.524 --> 00:01:27.121
So if you do want to just set the text,
just use `textContent`.

00:01:27.121 --> 00:01:31.970
If you want to pass in some HTML tags,
and have them interpreted as HTML,

00:01:31.970 --> 00:01:34.750
then use `innerHTML`.

00:01:34.750 --> 00:01:37.974
Once you start doing more
advanced DOM manipulation,

00:01:37.974 --> 00:01:42.033
you should be more careful about
using `innerHTML` and `textContent`,

00:01:42.033 --> 00:01:44.524
because they'll also
remove event listeners

00:01:44.524 --> 00:01:46.806
that you've attached to the
elements inside,

00:01:46.806 --> 00:01:48.594
which you'll learn how to do soon.

00:01:48.594 --> 00:01:51.851
In the next talk-through, I'll show you
a more sophisticated way

00:01:51.851 --> 00:01:55.103
to insert new elements
and text in your page.