Return to Video

Estableciendo InnerHTML y textContent (Versión en Video)

  • 0:01 - 0:07
    Ya hemos usado un poco el "innerHTML", pero quiero mostrarles rápidamente
  • 0:07 - 0:09
    más sobre esto.
  • 0:09 - 0:14
    En primer lugar, vamos a ver nuestro ejemplo, justo aquí donde pusimos "innerHTML".
  • 0:14 - 0:18
    Pasé una cadena que decía "All about cats" ("Todo sobre gatos").
  • 0:18 - 0:22
    Pero, de hecho, podría poner etiquetas HTML dentro de esa cadena.
  • 0:22 - 0:27
    Así que podría encerrar "cats" con etiquetas "",
  • 0:27 - 0:29
    y pueden ver como se ve la palabra enfatizada.
  • 0:29 - 0:33
    O aquí abajo donde cambié "dog" por "cat",
  • 0:33 - 0:36
    podría encerrar esto con etiquetas "",
  • 0:36 - 0:39
    y se vería remarcado, en negritas.
  • 0:39 - 0:44
    Incluso podría escribir etiquetas "" aquí dentro, o poner
  • 0:44 - 0:48
    una página web en HTML entera, si realmente quisiera podría hacerlo.
  • 0:48 - 0:54
    Eso está muy bien, porque significa que podemos hacer muchas cosas con "innerHTML".
  • 0:54 - 0:59
    Si sólo estamos cambiando el texto, en realidad, no necesitamos usar "innerHTML".
  • 0:59 - 1:04
    Podemos usar solamente la propiedad "textContent", y eso significa que el navegador
  • 1:04 - 1:09
    no va a interpretar lo que le pases como HTML, y lo va a reproducir como un texto sin formato.
  • 1:09 - 1:12
    Observen que si cambio esto por "textContent",
  • 1:12 - 1:15
    ¡mis corchetes se van a ver muy mal!
  • 1:15 - 1:19
    Así que en ese caso, nos tenemos que deshacer de ellos, porque el navegador
  • 1:19 - 1:23
    se niega a convertirlos en HTML.
  • 1:23 - 1:27
    Así que si sólo quieres poner texto, usa "textContent".
  • 1:27 - 1:32
    Si quieres pasar algunas etiquetas HTML, y que sean interpretadas como HTML,
  • 1:32 - 1:35
    entonces usa "innerHTML".
  • 1:35 - 1:38
    Una vez que empieces a hace una manipulación del DOM de forma más avanzada
  • 1:38 - 1:42
    deberías ser más cuidadoso al usar "innerHTML" y "textContent",
  • 1:42 - 1:45
    porque ellos también quitarán los detectores de eventos ("eventListeners" )
  • 1:45 - 1:47
    que hayas adjuntado a los elementos que están dentro,
  • 1:47 - 1:49
    algo que vas a aprender a hacer pronto.
  • 1:49 - 1:52
    En la siguiente guía paso a paso, te voy a mostrar una manera más sofisticada
  • 1:52 - 1:55
    para insertar elementos nuevos y texto en tu página.
Title:
Estableciendo InnerHTML y textContent (Versión en Video)
Description:

more » « less
Video Language:
English
Duration:
01:57

Spanish, Mexican subtitles

Revisions