YouTube

Got a YouTube account?

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

Spanish, Mexican subtitles

← Estableciendo InnerHTML y textContent (Versión en Video)

Get Embed Code
6 Languages

Showing Revision 5 created 05/18/2016 by Martha Isabel Soriano Ruiz.

  1. Ya hemos usado un poco el "innerHTML", pero quiero mostrarles rápidamente
  2. más sobre esto.
  3. En primer lugar, vamos a ver nuestro ejemplo, justo aquí donde pusimos "innerHTML".
  4. Pasé una cadena que decía "All about cats" ("Todo sobre gatos").
  5. Pero, de hecho, podría poner etiquetas HTML dentro de esa cadena.
  6. Así que podría encerrar "cats" con etiquetas "",
  7. y pueden ver como se ve la palabra enfatizada.
  8. O aquí abajo donde cambié "dog" por "cat",
  9. podría encerrar esto con etiquetas "",
  10. y se vería remarcado, en negritas.
  11. Incluso podría escribir etiquetas "" aquí dentro, o poner
  12. una página web en HTML entera, si realmente quisiera podría hacerlo.
  13. Eso está muy bien, porque significa que podemos hacer muchas cosas con "innerHTML".
  14. Si sólo estamos cambiando el texto, en realidad, no necesitamos usar "innerHTML".
  15. Podemos usar solamente la propiedad "textContent", y eso significa que el navegador
  16. no va a interpretar lo que le pases como HTML, y lo va a reproducir como un texto sin formato.
  17. Observen que si cambio esto por "textContent",
  18. ¡mis corchetes se van a ver muy mal!
  19. Así que en ese caso, nos tenemos que deshacer de ellos, porque el navegador
  20. se niega a convertirlos en HTML.
  21. Así que si sólo quieres poner texto, usa "textContent".
  22. Si quieres pasar algunas etiquetas HTML, y que sean interpretadas como HTML,
  23. entonces usa "innerHTML".
  24. Una vez que empieces a hace una manipulación del DOM de forma más avanzada
  25. deberías ser más cuidadoso al usar "innerHTML" y "textContent",
  26. porque ellos también quitarán los detectores de eventos ("eventListeners" )
  27. que hayas adjuntado a los elementos que están dentro,
  28. algo que vas a aprender a hacer pronto.
  29. En la siguiente guía paso a paso, te voy a mostrar una manera más sofisticada
  30. para insertar elementos nuevos y texto en tu página.