WEBVTT

00:00:00.000 --> 00:00:04.766
Temos usado bastante <i>innerHTML</i> por aqui,

00:00:04.766 --> 00:00:08.893
mas ainda quero mostrar
umas coisinhas sobre ele.

00:00:08.893 --> 00:00:14.021
Primeiro, vejamos nosso exemplo,
bem aqui onde definimos <i>innerHTML</i>

00:00:14.021 --> 00:00:17.992
Eu acabei de passar numa <i>string</i>
(cadeia de caracteres), "all about cats".

00:00:17.992 --> 00:00:22.176
Mas poderia ter colocado <i>tags</i>
HTML dentro da <i>string</i>.

00:00:22.176 --> 00:00:26.565
Eu poderia envolver "cats"
com <i>tags</i> ,

00:00:26.565 --> 00:00:29.373
e veja que aparece com ênfase.

00:00:29.373 --> 00:00:32.649
Ou aqui em baixo, onde 
troco "dog" por "cat",

00:00:32.649 --> 00:00:36.152
Eu poderia envolver isto
com <i>tags</i> ,

00:00:36.152 --> 00:00:39.007
e ele apareceria aqui destacada, em negrito.

00:00:39.007 --> 00:00:44.148
Poderia até escrever uma <i>tag</i> 
bem aqui dentro, ou colocar uma página

00:00:44.148 --> 00:00:47.842
HTML inteira aqui, se realmente quisesse.

00:00:47.842 --> 00:00:53.592
Isso é bem legal, porque significa que
podemos fazer muita coisa com <i>innerHTML</i>

00:00:53.592 --> 00:00:59.072
Se estivermos mudando o texto apenas, 
nem precisamos usar <i>innerHTML</i> .

00:00:59.072 --> 00:01:03.922
Podermos usar a propriedade <i>textContent</i>,
que faz com que o navegador

00:01:03.922 --> 00:01:09.131
não interprete o que foi passado
como HTML e renderize como texto simples.

00:01:09.131 --> 00:01:12.196
Perceba que se mudo isso
para <i>textContent</i>,

00:01:12.196 --> 00:01:14.992
meus colchetes aparecem-- eca!

00:01:14.992 --> 00:01:19.085
Neste caso, vamos nos livrar
deles, porque o navegador

00:01:19.085 --> 00:01:22.524
se recusa a transformá-los 
em HTML.

00:01:22.524 --> 00:01:27.121
Então... se quiser apenas definir o texto,
use apenas <i>textContent</i>.

00:01:27.121 --> 00:01:31.970
Se quiser passar algumas <i>tags HTML</i>,
e tê-las interpretadas como HTML,

00:01:31.970 --> 00:01:34.750
então use <i>innerHTML</i>.

00:01:34.750 --> 00:01:37.974
Quando começar a fazer
manipulações DOM avançadas,

00:01:37.974 --> 00:01:41.793
terá que tomar mais cuidado em
usar <i>innerHTML</i> e <i>textContent</i>,

00:01:41.793 --> 00:01:44.764
porque eles removerão também
ouvintes de evento

00:01:44.764 --> 00:01:46.806
que você anexou aos
elementos,

00:01:46.806 --> 00:01:48.594
algo que aprenderá logo
a fazer.

00:01:48.594 --> 00:01:52.033
No próximo vídeo, mostrarei um
jeito mais sofisticado

00:01:52.033 --> 00:01:54.672
de inserir elementos novos e
texto na sua página.

00:01:54.672 --> 00:02:00.032
Legendado por [Fred Guth] Revisado por [Valter Bigeli]