La idea clave Cuando alguien escribe un texto, la página debe mostrar sus palabras, no interpretarlas como etiquetas HTML. textContent inserta el contenido de forma segura.
Ejemplo paso a paso Este ejemplo muestra la idea en acción. Sigue los pasos y después cámbialo tú.
Ejemplo explicado { js }
const mensaje = '<b>Hola</b>';
document.querySelector('#saludo').textContent = mensaje;Editar y probar este mismo ejemplo ↓
mensaje contiene símbolos que parecen HTML. textContent los coloca como texto normal, sin crear ninguna etiqueta b. La vista previa muestra literalmente los signos < y >. Practica con código Antes de empezar, piensa: ¿El navegador pondrá «Hola» en negrita?
Cambia el mensaje a «<script>hola</script>» y comprueba que se ve como texto.
El resultado que buscamos Aparecen los caracteres escritos: no se ejecuta ningún script.
HTML + CSS + JS Practica aquí
▶ Ejecutar Detener Restaurar Copiar
HTML CSS JavaScript
Código Resultado Consola
Tu misión Cambia el mensaje a «<script>hola</script>» y comprueba que se ve como texto.
Editor de código · Ctrl/Cmd + Enter
Vista previa aislada · Sin acceso al sitio principal
Consola Lista para ejecutar.
✓ Comprobar solución Sin comprobar
Escribe tu cambio y pulsa «Comprobar solución». Puedes intentarlo tantas veces como quieras.
Listo
Necesito una pista Modifica solo la cadena mensaje.
Una pista más Mantén textContent para que el navegador no interprete el contenido como HTML.
Ver solución y explicación const mensaje = '<script>hola</script>';
document.querySelector('#saludo').textContent = mensaje;
Qué debes recordar: textContent muestra las etiquetas escritas como texto, sin ejecutarlas.
Práctica pendiente de corregir ✓ Marcar como leída
La lectura, las prácticas corregidas y las autoevaluaciones guiadas se guardan por separado en este navegador.
Revisado editorialmente · Referencia técnica específica ↗
← Lección anterior Atrapa un error con try y catch Lección siguiente → Espera una acción con setTimeout