CodeAventura
JavaScript en el DOM
▸Contenido y eventos▸Cambiar contenido con JavaScript

Misión

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contenido DOM</title>
  </head>
  <body>
    <h2 id="titulo">Reporte</h2>
    <div id="resultado"></div>

    <script src="script.js"></script>
  </body>
</html>
●localhost:5173
07 / 16Cambiar contenido con JavaScript
Anterior

Cambiar contenido con JavaScript

Dos herramientas, dos intenciones

En DOM, cambiar contenido parece simple, pero elegir mal la propiedad puede crear bugs o incluso vulnerabilidades de seguridad.

Las dos propiedades más usadas son:

  • textContent
  • innerHTML

textContent: texto puro y seguro

Úsalo cuando solo quieres mostrar texto.

Ventaja clave: aunque el texto contenga etiquetas HTML, las trata como texto literal, no las ejecuta. Esto lo hace seguro frente a datos que vienen del usuario.

innerHTML: estructura completa

Úsalo cuando necesitas insertar etiquetas HTML reales, no solo texto.

Advertencia: no uses innerHTML con datos que vienen del usuario sin limpiarlos antes. Si insertas directamente lo que el usuario escribe, abres la puerta a ataques XSS (Cross-Site Scripting).

Regla de criterio

CasoUsa
Texto planotextContent
Estructura HTML controladainnerHTML
Datos del usuariotextContent siempre

No conviertas todo en innerHTML "por costumbre". Es más potente, sí, pero también más delicado.

Tu desafío 🚀

  1. Cambia el texto del título con textContent
  2. Inserta dentro de #resultado un bloque HTML usando innerHTML

No se trata solo de cambiar contenido, sino de cambiarlo con intención.