-
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]
