YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Portuguese, Brazilian subtitles

← Definindo InnerHTML e textContent (Versão em Vídeo)

Get Embed Code
6 Languages

Showing Revision 7 created 03/15/2015 by Valter Bigeli.

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