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]