Modificar contenido del DOM con JS (textContent, innerText, innerHTML).

Dominar la manipulación del DOM en JavaScript es crucial para el desarrollo web dinámico. Las propiedades textContent, innerText y innerHTML son las herramientas clave para modificar el contenido de una página. Entender sus diferencias es vital: textContent prioriza la seguridad y la velocidad, mientras que innerHTML ofrece potencia al inyectar HTML, pero requiere extrema cautela por el riesgo de ataques XSS. Con esta guía, dominarás el uso profesional de cada una.

1. ¿Qué significa “modificar contenido” en el DOM con JavaScript?

«Modificar contenido» en el DOM (Modelo de Objeto de Documento) con JavaScript significa cambiar el texto o el HTML que se muestra dentro de un elemento en una página web después de que la página ha sido cargada. 🔄

En términos sencillos, es la capacidad de actualizar dinámicamente lo que el usuario ve sin necesidad de recargar la página completa.

1.1. ¿Para que sirve esta modificación de contenido?

Cuando usas JavaScript para modificar contenido, estás haciendo una de las siguientes acciones en un nodo (elemento HTML) específico:

1. Obtener contenido (Lectura): Acceder y leer el contenido actual de un elemento HTML para usarlo en tu lógica de programación.
   • Ejemplo: Leer el texto que ya está en un párrafo (p) o en una celda de tabla (td).
2. Establecer contenido (Escritura): Reemplazar o añadir nuevo texto o HTML dentro de un elemento existente.
   • Ejemplo: Cambiar un título (h1) de «Inicio» a «Bienvenidos» o insertar una lista (ul) completa en un div vacío.

1.2. Las 3 propiedades clave

Con las siguientes propiedades podemos modificar contenido dinámicamente en un página web.

Propiedad	Lo que Significa Modificar	Tipo de Contenido	Uso Principal
element.textContent	Manipular solo texto plano.	Trata todo como texto; las etiquetas HTML (<b>, <p>) se muestran como texto y no se renderizan.	Seguro y eficiente para texto puro (e.g., contenido del usuario).
element.innerText	Manipular texto visible.	Igual que textContent, pero respeta el estilo CSS y no incluye el texto oculto.	Raro. Se usa solo cuando es esencial el texto tal cual es visible.
element.innerHTML	Manipular HTML completo.	Interpreta el texto como código HTML; las etiquetas se renderizan como elementos reales.	Potente, pero peligroso. Se usa para insertar estructura o marcado HTML.

1.3. Casos de uso comunes:

• Actualizar precios en un carrito de compras
• Mostrar/ocultar menús y modales
• Validar formularios en tiempo real
• Cargar contenido nuevo (infinite scroll)
• Animaciones y transiciones
• Actualizar estados de interfaz (like, favorito, etc.)

1.4. Ejemplo sencillo: Contador de clicks:

Vamos a ver un ejemplo donde tenemos primero un HTML que representa un número y debajo un botón que al hacer clic se incrementa el valor del número en 1.

En este ejemplo vamos a tener el HTML y luego el JavaScript que modifica dicho contenido:

HTML – Estructura básica:

    <!-- Elemento que mostrará el número -->
    <p id="contador">0</p>
    
    <!-- Botón para incrementar -->
    <button onclick="aumentarContador()">Haz clic aquí</button>

    <script src="script.js"></script>Lenguaje del código: HTML, XML (xml)

Explicación del HTML:

• <p id="contador">: Párrafo que muestra el número (empezando en 0)
• onclick="aumentarContador()": Cuando haces clic en el botón, ejecuta la función JavaScript
• <script>: Incluye el archivo JavaScript

JAVASCRIPT – Lógica Simple

function aumentarContador() {
    // 1. Seleccionar el elemento del contador
    const elementoContador = document.getElementById('contador');
    
    // 2. Obtener el valor actual (convertir texto a número)
    let numeroActual = parseInt(elementoContador.textContent);
    
    // 3. Aumentar el número en 1
    numeroActual = numeroActual + 1;
    
    // 4. Actualizar el texto en la página
    elementoContador.textContent = numeroActual;
}Lenguaje del código: JavaScript (javascript)

Explicación del JavaScript. Línea por línea:

1. document.getElementById('contador')
   • Busca en la página el elemento con id=»contador»
   • Lo guarda en la variable elementoContador
2. parseInt(elementoContador.textContent)
   • Toma el texto dentro del párrafo («0»)
   • Lo convierte de texto a número (0)
3. numeroActual = numeroActual + 1
   • Suma 1 al número actual
   • Si era 0, ahora será 1
4. elementoContador.textContent = numeroActual
   • Actualiza el texto del párrafo con el nuevo número
   • ¡El cambio se ve inmediatamente en la página!

VISUALIZACIÓN:

2. ¿Cómo modificar contenido del DOM con JS?. Paso a paso:

Aquí dejamos una guía paso a paso, integrando las tres propiedades (textContent, innerText, innerHTML), junto con el HTML base para que lo puedas probar:

    <div id="mi-caja" style="border: 1px solid blue; padding: 10px;">
        <span style="display: none;">Texto Oculto</span>
        <h1>Contenido Original del DOM</h1>
        <p>Este párrafo tiene <b>etiquetas HTML</b> y texto.</p>
    </div>

    <script>
        // Aquí irá tu código JavaScript
    </script>Lenguaje del código: HTML, XML (xml)

El flujo de trabajo para modificar contenido del DOM con JavaScript siempre sigue esta secuencia Seleccionar → Acceder → Asignar:

1. Seleccionar el elemento que quieres cambiar.
2. Acceder a la propiedad de contenido (textContent o innerHTML).
3. Asignar el nuevo valor (el contenido).

Paso 1: Seleccionar el elemento

Primero, obtenemos una referencia al elemento que queremos manipular, para ello debemos usar las propiedades para acceder al DOM para su posterior modificación de contenidos

En este caso, seleccionamos y accedemos a la etiqueta HTML del div con el selector CSS ID mi-caja, del código HTML anterior, para continuar con los pasos desde el ejemplo!

// Obtener una referencia al elemento
const caja = document.getElementById('mi-caja');Lenguaje del código: JavaScript (javascript)

Paso 2: Usar la propiedad para OBTENER contenido (Lectura)

Antes de cambiar el contenido, veamos qué devuelve cada propiedad (textContent, innerText, innerHTML), al usarlo con el elemento seleccionado en el paso anterior, y guardado en la variable de nombre caja

Propiedad	Lo que Devuelve	Explicación
caja.textContent	Devuelve: "Texto OcultoContenido Original del DOMEste párrafo tiene etiquetas HTML y texto."	Devuelve TODO el texto, incluido el texto de elementos ocultos (display: none) y elimina todas las etiquetas HTML.
caja.innerText	Devuelve: "Contenido Original del DOMEste párrafo tiene etiquetas HTML y texto."	Devuelve solo el texto VISIBLE, excluyendo el contenido del <span> oculto. Es lento porque debe calcular la visibilidad.
caja.innerHTML	Devuelve: "<span style="display: none;">Texto Oculto</span><h1>Contenido Original del DOM</h1><p>Este párrafo tiene <b>etiquetas HTML</b> y texto.</p>"	Devuelve la cadena de HTML completa (etiquetas y texto) que está dentro del elemento.

Lo que hicimos en este cuadro fue usar cada una de las propiedades para modificar el contenido, para ver qué es lo que nos devuelve el elemento HTML que accedimos y seleccionamos en el paso anterior, y posteriormente realizar la modificación que deseamos.

Paso 3: Usar la propiedad para ASIGNAR contenido (Escritura)

Aquí es donde cambiamos el contenido del elemento caja.

Paso 3.A: Modificar con textContent (El más Seguro 🛡️)

Usa esta opción cuando solo quieras texto y desees neutralizar cualquier potencial código HTML.

const textoConHTML = '<h2>Nuevo título seguro</h2><p>Solo aparecerá como texto plano.</p>';

// ASIGNACIÓN:
caja.textContent = textoConHTML;
// El contenido se reemplaza por el texto plano de la variable.
// El navegador muestra: <h2>Nuevo título seguro</h2><p>Solo aparecerá como texto plano.</p>
Lenguaje del código: HTML, XML (xml)

Resultado visual: Verás el texto exacto, incluyendo las etiquetas <h2> y <p>.

Paso 3.B: Modificar con innerText (El de Rendimiento Lento 🐢)

Su comportamiento es casi idéntico a textContent para la escritura, pero es menos eficiente.

const nuevoTextoVisible = 'Este es el nuevo contenido visible.';

// ASIGNACIÓN:
caja.innerText = nuevoTextoVisible;
// El contenido se reemplaza por el texto de la variable.
Lenguaje del código: JavaScript (javascript)

Resultado visual: Es el mismo que con textContent, pero la operación interna es más costosa para el navegador. Generalmente, no se usa para establecer contenido a menos que sea en escenarios muy específicos.

Paso 3.C: Modificar con innerHTML (El más Potente pero Peligroso 💣)

Usa esta opción cuando quieras que el navegador interprete y renderice las etiquetas HTML que le pasas.

const nuevoHTML = '<h2>¡Contenido **Renderizado**!</h2><p style="color: red;">Este texto es ahora un elemento HTML rojo.</p>';

// ASIGNACIÓN:
caja.innerHTML = nuevoHTML;
// El contenido se reemplaza con la estructura HTML completa.Lenguaje del código: HTML, XML (xml)

Resultado visual: Verás un título h2 y un párrafo en color rojo, porque las etiquetas fueron interpretadas y aplicadas.

3. textContent

3.1. ¿Qué Es textContent?

• Es una propiedad de los elementos del DOM que permite leer o modificar el texto que contiene un nodo.
• A diferencia de innerHTML, no interpreta etiquetas HTML, sino que inserta el texto literalmente.
• Es la opción más segura y rápida cuando lo que querés cambiar es solo texto.

3.2. Paso a paso para usar textContent

1. Paso 1: Seleccionar el elemento:
   • Primero, necesitás una referencia al nodo que vas a modificar.
2. Paso 2: Leer el contenido actual
   • Podés ver qué texto contiene:
3. Paso 3: Modificar el contenido
   • Para cambiar el texto, simplemente reasignás la propiedad:
4. Paso 4: Insertar valores dinámicos
   • Podés usar variables o resultados de funciones:

3.3. Ejemplo completo

// HTML (Estructura inicial):
<h1 id="titulo">Título original</h1>
<button id="btn">Cambiar título</button>

// JAVASCRIPT (La magia):
<script>
  const titulo = document.getElementById('titulo');
  const boton = document.getElementById('btn');

  boton.addEventListener('click', () => {
    titulo.textContent = 'Título actualizado con textContent';
  });
</script>Lenguaje del código: HTML, XML (xml)

Qué pasa aquí:

1. HTML (Estructura inicial):
   • <h1 id="titulo">: Crea un título con identificador único «titulo»
   • <button id="btn">: Crea un botón con identificador único «btn»
   • Sin JavaScript: La página muestra «Título original» permanentemente
2. JAVASCRIPT (La magia):
   • document.getElementById('titulo'): Busca en toda la página el elemento con id="titulo" (el h1)
   • document.getElementById('btn'): Busca el elemento con id="btn" (el botón)
   • const titulo y const boton: Guardan referencias a estos elementos para usarlos después
   • boton.addEventListener('click', ...): Le dice al botón «Cuando te hagan clic, ejecuta esta función»
   • () => { ... }: Función flecha que se ejecuta al hacer clic
   • titulo.textContent = '...': Modifica el TEXTO dentro del título h1

🎯 ¿QUÉ SUCEDE VISUALMENTE?

1. ANTES del clic:
   • Pantalla muestra: Título original
2. DESPUÉS del clic:
   • Pantalla muestra: Título actualizado con textContent

3.4. Cuándo usar textContent

✅ Para mostrar mensajes dinámicos en un sitio web.
✅ Para insertar contenido proveniente de usuarios (previene ataques XSS).
✅ Para actualizaciones rápidas de texto (notificaciones, títulos, párrafos).

4. innerText

4.1. ¿Qué es innerText?

• Es una propiedad de los elementos del DOM que permite leer o modificar el texto visible dentro de un nodo.
• A diferencia de textContent:
  • Respeta los estilos CSS y la visibilidad del texto (por ejemplo, si un texto está con display: none, innerText no lo devuelve, mientras que textContent sí).
  • También fuerza un reflow (recalcula estilos del documento), lo que puede impactar en la performance si se usa en exceso.

4.2. Paso a paso para usar innerText

• Paso 1: Seleccionar el elemento
  • Primero, obtenés una referencia al nodo que querés modificar.
• Paso 2: Leer el contenido actual
  • Podés inspeccionar qué texto visible contiene el nodo.
• Paso 3: Modificar el contenido
  • Reasignás la propiedad para cambiar el texto mostrado.
• Paso 4: Insertar valores dinámicos
  • Podés mostrar variables o resultados de funciones respetando estilos visibles.

4.3. Ejemplo completo

<!-- HTML (Estructura inicial) -->
<h2 id="subtitulo">Subtítulo original</h2>
<p id="texto" style="display: none;">Texto oculto</p>
<button id="btn">Cambiar subtítulo</button>

<script>
  const subtitulo = document.getElementById('subtitulo');
  const boton = document.getElementById('btn');
  const textoOculto = document.getElementById('texto');

  boton.addEventListener('click', () => {
    subtitulo.innerText = 'Subtítulo actualizado con innerText';
    console.log("innerText del párrafo oculto:", textoOculto.innerText);
    console.log("textContent del párrafo oculto:", textoOculto.textContent);
  });
</script>Lenguaje del código: HTML, XML (xml)

Qué pasa aquí

1. HTML (Estructura inicial):
   • <h2 id="subtitulo">: Crea un subtítulo con identificador único subtitulo.
   • <p id="texto" style="display: none;">: Crea un párrafo que está oculto en pantalla.
   • <button id="btn">: Crea un botón con identificador único btn.
2. JAVASCRIPT (La magia):
   • document.getElementById('subtitulo'): Busca el elemento <h2>.
   • document.getElementById('btn'): Busca el botón.
   • document.getElementById('texto'): Busca el párrafo oculto.
   • subtitulo.innerText = '...': Cambia el texto VISIBLE del subtítulo.
   • textoOculto.innerText: Devuelve una cadena vacía porque el párrafo está oculto.
   • textoOculto.textContent: Devuelve "Texto oculto" aunque no se vea.

¿QUÉ SUCEDE VISUALMENTE?

• ANTES del clic:
  • Pantalla muestra: Subtítulo original
    (El párrafo está oculto y no se ve nada más).
• DESPUÉS del clic:
  • Pantalla muestra: Subtítulo actualizado con innerText
    (El párrafo sigue oculto).

En la consola del navegador sucedería lo siguiente:

• innerText del párrafo oculto: → "" (vacío, porque está oculto).
• textContent del párrafo oculto: → "Texto oculto".

4.4. Cuándo usar innerText

✅ Cuando querés modificar texto que esté condicionado por visibilidad o estilos CSS.
✅ Cuando necesitás que el valor refleje lo que el usuario realmente ve en pantalla.
⚠️ Evitar su uso masivo en operaciones que se repiten mucho (como bucles), ya que recalcula estilos (reflow).

5. innerHTML

5.1. ¿Qué rs innerHTML?

• Es una propiedad de los elementos del DOM que permite leer o modificar el contenido HTML dentro de un nodo.
• A diferencia de textContent o innerText:
  • Interpreta etiquetas HTML.
  • Permite insertar texto + elementos HTML dinámicamente.
• Es muy flexible, pero también puede ser inseguro si se usan datos que provienen de usuarios (riesgo de ataques XSS).

5.2. Paso a paso para usar innerHTML

• Paso 1: Seleccionar el elemento
  • Primero, obtenés la referencia al nodo donde querés modificar su contenido.
• Paso 2: Leer el contenido actual
  • Podés inspeccionar qué HTML tiene dentro el nodo.
• Paso 3: Modificar el contenido
  • Reasignás la propiedad innerHTML con texto y/o etiquetas HTML.
• Paso 4: Insertar contenido dinámico
  • Podés generar etiquetas HTML nuevas de manera dinámica usando variables.

5.3. Ejemplo completo

<!-- HTML (Estructura inicial) -->
<div id="contenido">
  <p>Texto original</p>
</div>
<button id="btn">Cambiar contenido</button>

<script>
  const contenedor = document.getElementById('contenido');
  const boton = document.getElementById('btn');

  boton.addEventListener('click', () => {
    contenedor.innerHTML = `
      <h2>Nuevo subtítulo dinámico</h2>
      <p><strong>Este texto fue insertado con innerHTML</strong></p>
    `;
  });
</script>Lenguaje del código: HTML, XML (xml)

Qué pasa aquí:

• HTML (Estructura inicial):
  • <div id="contenido">: Contenedor que tiene un párrafo inicial.
  • <button id="btn">: Botón con identificador único btn.
• Sin JavaScript:
  • La página muestra solo: Texto original.
• JAVASCRIPT (La magia):
  • document.getElementById('contenido'): Busca el div con id contenido.
  • document.getElementById('btn'): Busca el botón.
  • contenedor.innerHTML = '...': Reemplaza TODO el contenido del div con nuevas etiquetas HTML (<h2> y <p>).

¿QUÉ SUCEDE VISUALMENTE?

• ANTES del clic:
  • Pantalla muestra: Texto original
• DESPUÉS del clic:
  • Pantalla muestra:
    • Nuevo subtítulo dinámico
    • Este texto fue insertado con innerHTML
  • (con estilos de <h2> y <strong> aplicados).

5.4. Cuándo usar innerHTML

✅ Para insertar o reemplazar bloques completos de HTML.
✅ Cuando querés crear contenido dinámico que incluya etiquetas y no solo texto.
✅ Para construir interfaces rápidas o fragmentos de HTML.

⚠️ Tené cuidado cuando el contenido viene de usuarios (formularios, inputs, datos externos), ya que puede inyectar código malicioso (XSS).

6. ¿Cuál de los tres es seguro contra ataques de Cross-Site Scripting (XSS)?

6.1. ¿Qué significa Cross-Site Scripting (XSS)?

El Cross-Site Scripting (XSS) es un tipo de vulnerabilidad de seguridad que se encuentra comúnmente en aplicaciones web. Ocurre cuando un atacante logra inyectar código malicioso (generalmente JavaScript) en una página web vista por otros usuarios.

6.1.1. La mecánica del ataque

1. Inyección: El atacante, a través de un formulario de entrada, un comentario o un parámetro de URL, introduce una cadena que contiene etiquetas HTML peligrosas, como un script (<script>alert('¡Hackeado!');</script>).
2. Persistencia: La aplicación web, sin revisar ni limpiar (sanitizar) esta cadena, la almacena o la devuelve a la página.
3. Ejecución: Cuando el navegador de otro usuario carga la página y encuentra esa cadena inyectada, el uso de métodos no seguros como innerHTML hace que el navegador interprete esa cadena como código HTML legítimo.
4. Consecuencia: El código JavaScript malicioso se ejecuta en el navegador del usuario. Las consecuencias pueden ser graves, incluyendo el robo de cookies de sesión (para suplantar la identidad del usuario), la redirección a sitios maliciosos, o la modificación no autorizada del contenido de la página.

6.2. ¿Cuál de los tres es seguro contra XSS?

De las tres propiedades para manipular contenido, la que es intrínsecamente segura contra XSS es element.textContent.

Propiedad	Seguridad contra XSS	Razón Profesional
element.textContent	✅ SEGURO	Trata la cadena inyectada como texto plano. Si un atacante inyecta <script>, el navegador mostrará las letras <s c r i p t> y no ejecutará el código. Es la Regla de Oro para insertar datos de usuario.
element.innerText	✅ SEGURO	Al igual que textContent, trata el contenido como texto plano para la asignación, neutralizando el código HTML. (Su problema es el rendimiento, no la seguridad).
element.innerHTML	❌ PELIGROSO	Interpreta la cadena como HTML. Si la cadena contiene un script, el navegador lo ejecuta inmediatamente. Solo debe usarse con HTML que sabes con certeza que es estático o que ha sido estrictamente sanitizado.

En resumen:

• Para datos de usuario o texto dinámico: Siempre use textContent. Es la forma más fácil y rápida de evitar el 99% de los ataques XSS basados en inyección de contenido.
• Si debe usar HTML dinámico: Nunca use innerHTML directamente. Emplee una biblioteca de sanitización probada como DOMPurify para limpiar la cadena antes de la inserción, o cree los elementos de forma segura usando document.createElement().

7. ¿Cómo afecta la propiedad display: none; al valor de innerText y textContent?

7.1. ¿Qué es display: none; ?

display: none; es una propiedad de CSS (Cascading Style Sheets) que se utiliza para ocultar completamente un elemento de una página web, quitándolo del flujo normal del diseño.

Cuando aplicás display: none; a un elemento:

1. El elemento no se muestra visualmente.
2. No ocupa espacio en el diseño de la página (a diferencia de visibility: hidden;, que oculta el elemento pero mantiene su espacio vacío).
3. El elemento y su contenido permanecen en el DOM, pero son invisibles e inactivos para el usuario.

7.2. Cómo afecta display: none; a innerText y textContent

La presencia de display: none; afecta de manera fundamentalmente diferente a innerText y textContent, lo cual es crucial para comprender su rendimiento y uso.

Propiedad	Efecto de display: none;	Razón y Consecuencia
element.textContent	NO se ve afectado.	Razón: textContent es una propiedad de datos del DOM. Solo lee o escribe la información contenida en el nodo y sus hijos, ignorando por completo el estilo CSS y la visibilidad.
element.innerText	SÍ se ve afectado. El valor devuelto es una cadena vacía ("") o excluye el texto del elemento oculto.	Razón: innerText es una propiedad de renderizado. Su objetivo es devolver el texto tal como lo vería el usuario. Como display: none; hace que el contenido sea invisible, innerText lo omite.

Exportar a Hojas de cálculo

7.3. Ejemplo práctico

Imaginá el siguiente HTML y CSS:

HTML

<div id="caja">
    <span id="oculto" style="display: none;">Este texto no se ve. </span>
    Texto visible.
</div>

<script>
    const caja = document.getElementById('caja');

    // 1. Lectura con textContent
    // Resultado: "Este texto no se ve. Texto visible."
    // Incluye el texto oculto porque ignora el CSS.
    console.log("textContent:", caja.textContent.trim());

    // 2. Lectura con innerText
    // Resultado: "Texto visible."
    // Omite el texto oculto porque respeta el CSS.
    console.log("innerText:", caja.innerText.trim());
</script>
Lenguaje del código: HTML, XML (xml)

🔑 La Clave Profesional: Rendimiento

Esta diferencia explica por qué innerText es mucho más lento:

Para que innerText sepa si debe devolver el texto de un elemento (o si el texto está afectado por display: none;), el navegador debe calcular el diseño (ejecutar un reflow). Este cálculo es costoso y consume recursos.

textContent, por otro lado, ignora este cálculo de diseño, lo que lo hace significativamente más rápido y eficiente para la mayoría de las tareas de manipulación de texto.