1
00:00:00,718 --> 00:00:06,893
We've already used `innerHTML` quite a bit
here, but I want to quickly show you

2
00:00:06,893 --> 00:00:08,885
a little more about it.

3
00:00:08,885 --> 00:00:14,021
First, let's look at our example,
right here where we set `innerHTML`.

4
00:00:14,021 --> 00:00:17,992
I've just passed in a string,
"all about cats".

5
00:00:17,992 --> 00:00:22,176
But, in fact, I could put HTML tags
inside that string.

6
00:00:22,176 --> 00:00:26,565
So I could surround "cats"
with `` tags,

7
00:00:26,565 --> 00:00:29,373
and you can see it shows up emphasized.

8
00:00:29,373 --> 00:00:32,649
Or down here, where I
change "dog" to "cat",

9
00:00:32,649 --> 00:00:36,152
I could surround this
with `` tags,

10
00:00:36,152 --> 00:00:39,007
and it shows up strong, bold.

11
00:00:39,007 --> 00:00:44,148
I could even write an `` tag
inside here, or put an entire webpage's

12
00:00:44,148 --> 00:00:47,842
HTML in here, if I really wanted.

13
00:00:47,842 --> 00:00:53,592
So that's pretty neat, because it means
we can do a lot with `innerHTML`.

14
00:00:53,592 --> 00:00:59,072
If we're only changing the text, actually,
we don't even need to use `innerHTML`.

15
00:00:59,072 --> 00:01:03,922
We can just use the `textContent`property,
and that means that browser

16
00:01:03,922 --> 00:01:09,131
won't interpret what you pass as HTML,
and will just render it as plain text.

17
00:01:09,131 --> 00:01:12,196
Notice if I change this to `textContent`,

18
00:01:12,196 --> 00:01:14,992
my brackets show up-- gross!

19
00:01:14,992 --> 00:01:19,085
So, in that case, we're just going to
get rid of them, because the browser

20
00:01:19,085 --> 00:01:22,524
refuses to turn them into actual HTML.

21
00:01:22,524 --> 00:01:27,121
So if you do want to just set the text,
just use `textContent`.

22
00:01:27,121 --> 00:01:31,970
If you want to pass in some HTML tags,
and have them interpreted as HTML,

23
00:01:31,970 --> 00:01:34,750
then use `innerHTML`.

24
00:01:34,750 --> 00:01:37,974
Once you start doing more
advanced DOM manipulation,

25
00:01:37,974 --> 00:01:42,033
you should be more careful about
using `innerHTML` and `textContent`,

26
00:01:42,033 --> 00:01:44,524
because they'll also
remove event listeners

27
00:01:44,524 --> 00:01:46,806
that you've attached to the
elements inside,

28
00:01:46,806 --> 00:01:48,594
which you'll learn how to do soon.

29
00:01:48,594 --> 00:01:51,851
In the next talk-through, I'll show you
a more sophisticated way

30
00:01:51,851 --> 00:01:55,103
to insert new elements
and text in your page.