WEBVTT

00:00:00.718 --> 00:00:06.893
Ya hemos usado un poco el "innerHTML", pero quiero mostrarles rápidamente

00:00:06.893 --> 00:00:08.885
más sobre esto.

00:00:08.885 --> 00:00:14.021
En primer lugar, vamos a ver nuestro ejemplo, justo aquí donde pusimos "innerHTML".

00:00:14.021 --> 00:00:17.992
Pasé una cadena que decía "All about cats" ("Todo sobre gatos").

00:00:17.992 --> 00:00:22.176
Pero, de hecho, podría poner etiquetas HTML dentro de esa cadena.

00:00:22.176 --> 00:00:26.565
Así que podría encerrar "cats" con etiquetas "",

00:00:26.565 --> 00:00:29.373
y pueden ver como se ve la palabra enfatizada.

00:00:29.373 --> 00:00:32.649
O aquí abajo donde cambié "dog" por "cat",

00:00:32.649 --> 00:00:36.152
podría encerrar esto con etiquetas "",

00:00:36.152 --> 00:00:39.007
y se vería remarcado, en negritas.

00:00:39.007 --> 00:00:44.148
Incluso podría escribir etiquetas "" aquí dentro, o poner

00:00:44.148 --> 00:00:47.842
una página web en HTML entera, si realmente quisiera podría hacerlo.

00:00:47.842 --> 00:00:53.592
Eso está muy bien, porque significa que podemos hacer muchas cosas con "innerHTML".

00:00:53.592 --> 00:00:59.072
Si sólo estamos cambiando el texto, en realidad, no necesitamos usar "innerHTML".

00:00:59.072 --> 00:01:03.922
Podemos usar solamente la propiedad "textContent", y eso significa que el navegador

00:01:03.922 --> 00:01:09.131
no va a interpretar lo que le pases como HTML, y lo va a reproducir como un texto sin formato.

00:01:09.131 --> 00:01:12.196
Observen que si cambio esto por "textContent",

00:01:12.196 --> 00:01:14.992
¡mis corchetes se van a ver muy mal!

00:01:14.992 --> 00:01:19.085
Así que en ese caso, nos tenemos que deshacer de ellos, porque el navegador

00:01:19.085 --> 00:01:22.524
se niega a convertirlos en HTML.

00:01:22.524 --> 00:01:27.121
Así que si sólo quieres poner texto, usa "textContent".

00:01:27.121 --> 00:01:31.970
Si quieres pasar algunas etiquetas HTML, y que sean interpretadas como HTML,

00:01:31.970 --> 00:01:34.750
entonces usa "innerHTML".

00:01:34.750 --> 00:01:37.974
Una vez que empieces a hace una manipulación del DOM de forma más avanzada

00:01:37.974 --> 00:01:42.033
deberías ser más cuidadoso al usar "innerHTML" y "textContent",

00:01:42.033 --> 00:01:44.524
porque ellos también quitarán los detectores de eventos ("eventListeners" )

00:01:44.524 --> 00:01:46.806
que hayas adjuntado a los elementos que están dentro,

00:01:46.806 --> 00:01:48.594
algo que vas a aprender a hacer pronto.

00:01:48.594 --> 00:01:51.840
En la siguiente guía paso a paso, te voy a mostrar una manera más sofisticada

00:01:51.840 --> 00:01:55.190
para insertar elementos nuevos y texto en tu página.