-
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.