All language subtitles for 007 Text Manipulation and the Text Content Property.en

Up till now we've seen that we can change the text inside the selected HTML element using this thing

called innerHTML, but there's actually another property that you can tap into,

and it's called the textContent. And it might seem at first glance that they do exactly the same thing,

they basically just change the text of whichever element that we select,

right?

But actually it's slightly different because the innerHTML does exactly what it says on the tin,

it actually gives you the HTML that's in between the element tags.

So for example if I tried to get the current value of the HTML, it's Hello.

But let's go into our code and if I add a strong tag around the word Hello, then I also get the strong

tags. But if I tried the same thing with textContent, then that's kind of exactly what it is,

right?

It just gives you the text content.

So what this means is that if you select the h1 element and then use innerHTML, then it will literally

give you all of the HTML that is inside that element tags, including any other HTML tags.

So this means that if you use innerHTML, you can also add HTML code on the fly.

So, for example, if we wanted our Hello to not only change its text to Good Bye,

but we also wanted that word to be emphasized,

so to be italicized effectively, then we can assign an em tag around the word,

and that goes into the innerHTML of the h1, and you can see that we changed the text and we also

applied that HTML element to the text.

But remember that when you're writing code like this, the HTML also has to go into quotation marks, because

the value has to be a string, because otherwise it's going to think it's Javascript code, and this is

certainly not Javascript code, right?

So remember that when you're changing this, be it innerHTML

or the style value, you always have to specify it as a string.

So have a play around with that and see if that makes sense, and apply some HTML using your Javascript.

And in the next lesson we're going to talk about the last thing that we can manipulate which is the

attributes of each element.