Afrikaans
Akan
Albanian
Amharic
Arabic
Armenian
Azerbaijani
Basque
Belarusian
Bemba
Bengali
Bihari
Bosnian
Breton
Bulgarian
Cambodian
Catalan
Cebuano
Cherokee
Chichewa
Chinese (Simplified)
Chinese (Traditional)
Corsican
Croatian
Czech
Danish
Dutch
English
Esperanto
Estonian
Ewe
Faroese
Filipino
Finnish
Frisian
Ga
Galician
Georgian
German
Greek
Guarani
Gujarati
Haitian Creole
Hausa
Hawaiian
Hebrew
Hindi
Hmong
Hungarian
Icelandic
Igbo
Indonesian
Interlingua
Irish
Italian
Japanese
Javanese
Kannada
Kazakh
Kinyarwanda
Kirundi
Kongo
Korean
Krio (Sierra Leone)
Kurdish
Kurdish (Soranรฎ)
Kyrgyz
Laothian
Latin
Latvian
Lingala
Lithuanian
Lozi
Luganda
Luo
Luxembourgish
Macedonian
Malagasy
Malay
Malayalam
Maltese
Maori
Marathi
Mauritian Creole
Moldavian
Mongolian
Myanmar (Burmese)
Montenegrin
Nepali
Nigerian Pidgin
Northern Sotho
Norwegian
Norwegian (Nynorsk)
Occitan
Oriya
Oromo
Pashto
Persian
Polish
Portuguese (Brazil)
Portuguese (Portugal)
Punjabi
Quechua
Romanian
Romansh
Runyakitara
Russian
Samoan
Scots Gaelic
Serbian
Serbo-Croatian
Sesotho
Setswana
Seychellois Creole
Shona
Sindhi
Sinhalese
Slovak
Slovenian
Somali
Spanish
Spanish (Latin American)
Sundanese
Swahili
Swedish
Tajik
Tamil
Tatar
Telugu
Thai
Tigrinya
Tonga
Tshiluba
Tumbuka
Turkish
Turkmen
Twi
Uighur
Ukrainian
Urdu
Uzbek
Vietnamese
Welsh
Wolof
Xhosa
Yiddish
Yoruba
Zulu
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.
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.