Temos usado bastante innerHTML por aqui,
mas ainda quero mostrar
umas coisinhas sobre ele.
Primeiro, vejamos nosso exemplo,
bem aqui onde definimos innerHTML
Eu acabei de passar numa string
(cadeia de caracteres), "all about cats".
Mas poderia ter colocado tags
HTML dentro da string.
Eu poderia envolver "cats"
com tags ,
e veja que aparece com ênfase.
Ou aqui em baixo, onde
troco "dog" por "cat",
Eu poderia envolver isto
com tags ,
e ele apareceria aqui destacada, em negrito.
Poderia até escrever uma tag
bem aqui dentro, ou colocar uma página
HTML inteira aqui, se realmente quisesse.
Isso é bem legal, porque significa que
podemos fazer muita coisa com innerHTML
Se estivermos mudando o texto apenas,
nem precisamos usar innerHTML .
Podermos usar a propriedade textContent,
que faz com que o navegador
não interprete o que foi passado
como HTML e renderize como texto simples.
Perceba que se mudo isso
para textContent,
meus colchetes aparecem-- eca!
Neste caso, vamos nos livrar
deles, porque o navegador
se recusa a transformá-los
em HTML.
Então... se quiser apenas definir o texto,
use apenas textContent.
Se quiser passar algumas tags HTML,
e tê-las interpretadas como HTML,
então use innerHTML.
Quando começar a fazer
manipulações DOM avançadas,
terá que tomar mais cuidado em
usar innerHTML e textContent,
porque eles removerão também
ouvintes de evento
que você anexou aos
elementos,
algo que aprenderá logo
a fazer.
No próximo vídeo, mostrarei um
jeito mais sofisticado
de inserir elementos novos e
texto na sua página.
Legendado por [Fred Guth] Revisado por [Valter Bigeli]