WEBVTT

0
00:00.590 --> 00:07.040
Up till now we've seen that we can change the text inside the selected HTML element using this thing

1
00:07.040 --> 00:12.280
called innerHTML, but there's actually another property that you can tap into,

2
00:12.440 --> 00:20.510
and it's called the textContent. And it might seem at first glance that they do exactly the same thing,

3
00:20.630 --> 00:24.850
they basically just change the text of whichever element that we select,

4
00:24.860 --> 00:25.260
right?

5
00:25.340 --> 00:32.510
But actually it's slightly different because the innerHTML does exactly what it says on the tin,

6
00:32.510 --> 00:37.420
it actually gives you the HTML that's in between the element tags.

7
00:37.430 --> 00:42.860
So for example if I tried to get the current value of the HTML, it's Hello.

8
00:43.250 --> 00:53.750
But let's go into our code and if I add a strong tag around the word Hello, then I also get the strong

9
00:53.750 --> 00:59.990
tags. But if I tried the same thing with textContent, then that's kind of exactly what it is,

10
00:59.990 --> 01:00.200
right?

11
01:00.200 --> 01:02.980
It just gives you the text content.

12
01:02.990 --> 01:11.450
So what this means is that if you select the h1 element and then use innerHTML, then it will literally

13
01:11.750 --> 01:20.360
give you all of the HTML that is inside that element tags, including any other HTML tags.

14
01:20.360 --> 01:26.490
So this means that if you use innerHTML, you can also add HTML code on the fly.

15
01:26.720 --> 01:34.030
So, for example, if we wanted our Hello to not only change its text to Good Bye,

16
01:34.190 --> 01:37.960
but we also wanted that word to be emphasized,

17
01:38.030 --> 01:44.640
so to be italicized effectively, then we can assign an em tag around the word,

18
01:44.630 --> 01:51.650
and that goes into the innerHTML of the h1, and you can see that we changed the text and we also

19
01:51.650 --> 01:54.710
applied that HTML element to the text.

20
01:54.710 --> 02:02.510
But remember that when you're writing code like this, the HTML also has to go into quotation marks, because

21
02:02.510 --> 02:08.690
the value has to be a string, because otherwise it's going to think it's Javascript code, and this is

22
02:08.690 --> 02:11.550
certainly not Javascript code, right?

23
02:11.840 --> 02:15.550
So remember that when you're changing this, be it innerHTML 

24
02:15.590 --> 02:19.990
or the style value, you always have to specify it as a string.

25
02:20.210 --> 02:27.210
So have a play around with that and see if that makes sense, and apply some HTML using your Javascript.

26
02:27.500 --> 02:32.540
And in the next lesson we're going to talk about the last thing that we can manipulate which is the

27
02:32.660 --> 02:34.970
attributes of each element.