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