[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.72,0:00:06.89,Default,,0000,0000,0000,,Ya hemos usado un poco el "innerHTML", pero quiero mostrarles rápidamente
Dialogue: 0,0:00:06.89,0:00:08.88,Default,,0000,0000,0000,,más sobre esto.
Dialogue: 0,0:00:08.88,0:00:14.02,Default,,0000,0000,0000,,En primer lugar, vamos a ver nuestro ejemplo, justo aquí donde pusimos "innerHTML".
Dialogue: 0,0:00:14.02,0:00:17.99,Default,,0000,0000,0000,,Pasé una cadena que decía "All about cats" ("Todo sobre gatos").
Dialogue: 0,0:00:17.99,0:00:22.18,Default,,0000,0000,0000,,Pero, de hecho, podría poner etiquetas HTML dentro de esa cadena.
Dialogue: 0,0:00:22.18,0:00:26.56,Default,,0000,0000,0000,,Así que podría encerrar "cats" con etiquetas "",
Dialogue: 0,0:00:26.56,0:00:29.37,Default,,0000,0000,0000,,y pueden ver como se ve la palabra enfatizada.
Dialogue: 0,0:00:29.37,0:00:32.65,Default,,0000,0000,0000,,O aquí abajo donde cambié "dog" por "cat",
Dialogue: 0,0:00:32.65,0:00:36.15,Default,,0000,0000,0000,,podría encerrar esto con etiquetas "",
Dialogue: 0,0:00:36.15,0:00:39.01,Default,,0000,0000,0000,,y se vería remarcado, en negritas.
Dialogue: 0,0:00:39.01,0:00:44.15,Default,,0000,0000,0000,,Incluso podría escribir etiquetas "" aquí dentro, o poner
Dialogue: 0,0:00:44.15,0:00:47.84,Default,,0000,0000,0000,,una página web en HTML entera, si realmente quisiera podría hacerlo.
Dialogue: 0,0:00:47.84,0:00:53.59,Default,,0000,0000,0000,,Eso está muy bien, porque significa que podemos hacer muchas cosas con "innerHTML".
Dialogue: 0,0:00:53.59,0:00:59.07,Default,,0000,0000,0000,,Si sólo estamos cambiando el texto, en realidad, no necesitamos usar "innerHTML".
Dialogue: 0,0:00:59.07,0:01:03.92,Default,,0000,0000,0000,,Podemos usar solamente la propiedad "textContent", y eso significa que el navegador
Dialogue: 0,0:01:03.92,0:01:09.13,Default,,0000,0000,0000,,no va a interpretar lo que le pases como HTML, y lo va a reproducir como un texto sin formato.
Dialogue: 0,0:01:09.13,0:01:12.20,Default,,0000,0000,0000,,Observen que si cambio esto por "textContent",
Dialogue: 0,0:01:12.20,0:01:14.99,Default,,0000,0000,0000,,¡mis corchetes se van a ver muy mal!
Dialogue: 0,0:01:14.99,0:01:19.08,Default,,0000,0000,0000,,Así que en ese caso, nos tenemos que deshacer de ellos, porque el navegador
Dialogue: 0,0:01:19.08,0:01:22.52,Default,,0000,0000,0000,,se niega a convertirlos en HTML.
Dialogue: 0,0:01:22.52,0:01:27.12,Default,,0000,0000,0000,,Así que si sólo quieres poner texto, usa "textContent".
Dialogue: 0,0:01:27.12,0:01:31.97,Default,,0000,0000,0000,,Si quieres pasar algunas etiquetas HTML, y que sean interpretadas como HTML,
Dialogue: 0,0:01:31.97,0:01:34.75,Default,,0000,0000,0000,,entonces usa "innerHTML".
Dialogue: 0,0:01:34.75,0:01:37.97,Default,,0000,0000,0000,,Una vez que empieces a hace una manipulación del DOM de forma más avanzada
Dialogue: 0,0:01:37.97,0:01:42.03,Default,,0000,0000,0000,,deberías ser más cuidadoso al usar "innerHTML" y "textContent",
Dialogue: 0,0:01:42.03,0:01:44.52,Default,,0000,0000,0000,,porque ellos también quitarán los detectores de eventos ("eventListeners" )
Dialogue: 0,0:01:44.52,0:01:46.81,Default,,0000,0000,0000,,que hayas adjuntado a los elementos que están dentro,
Dialogue: 0,0:01:46.81,0:01:48.59,Default,,0000,0000,0000,,algo que vas a aprender a hacer pronto.
Dialogue: 0,0:01:48.59,0:01:51.84,Default,,0000,0000,0000,,En la siguiente guía paso a paso, te voy a mostrar una manera más sofisticada
Dialogue: 0,0:01:51.84,0:01:55.19,Default,,0000,0000,0000,,para insertar elementos nuevos y texto en tu página.