Modificar el texto de un elemento HTML de forma dinámica es una de las tareas más comunes cuando trabajas con el DOM en JavaScript. Existen dos propiedades principales que te permiten lograrlo: textContent e innerText. Ambas cumplen un propósito similar, pero es importante conocer cómo funcionan y cuándo usarlas.

¿Cómo seleccionar un elemento del DOM para modificar su texto?

Antes de modificar cualquier texto, necesitas obtener una referencia al elemento HTML que deseas cambiar. Esto se hace guardando el nodo en una constante mediante document.querySelector [0:27].

Por ejemplo, si tienes un <h1> con un id="title", puedes seleccionarlo así:

javascript const titulo = document.querySelector('#title');

• El símbolo # indica que estás buscando por ID.
• También podrías buscar directamente por la etiqueta h1 si solo existe una en el documento.
• Una vez almacenado en la constante, ya tienes acceso a todas las propiedades del nodo.

Para inspeccionar esas propiedades, puedes usar console.dir(titulo) en la consola del navegador [1:05]. Esto te muestra el nodo como un objeto JavaScript con todas sus propiedades disponibles.

¿Qué es textContent y cómo se usa para cambiar texto?

La propiedad textContent representa todo el contenido de texto dentro de un nodo [1:15]. Al acceder a ella, puedes leer el texto actual del elemento.

Para modificarlo, simplemente asignas un nuevo valor:

javascript titulo.textContent = 'Nuevo texto';

• Al ejecutar esta línea, el cambio se refleja visualmente en el navegador de inmediato [1:35].
• Si inspeccionas el HTML en el documento, verás que la etiqueta <h1> ahora contiene el texto actualizado.
• textContent devuelve todo el texto del nodo, incluyendo el de elementos hijos ocultos.

¿Cuál es la diferencia entre innerText y textContent?

Otra forma de modificar el texto es mediante la propiedad innerText [2:05]. Funciona de manera similar:

javascript titulo.innerText = 'Este es otro título';

• Al poner titulo.innerText sin asignar un valor, la consola te muestra el texto contenido dentro del elemento.
• Al asignarle un nuevo string, el texto se actualiza tanto en la vista como en el HTML del documento [2:30].

La diferencia sutil entre ambas propiedades es que innerText respeta el estilo visual del elemento, es decir, no incluye texto de elementos ocultos con CSS. En cambio, textContent devuelve absolutamente todo el contenido de texto sin importar si está visible o no.

¿Cuáles son los pasos para modificar texto en el DOM?

El proceso se resume en una secuencia clara:

• Selecciona el elemento que contiene el texto que deseas cambiar usando querySelector.
• Lee el texto actual accediendo a .textContent o .innerText.
• Asigna el nuevo valor con el operador = y el texto deseado entre comillas.

Esta técnica es la base para construir interfaces dinámicas donde el contenido cambia según el comportamiento del usuario en la plataforma. Dominar estas dos propiedades te da control directo sobre lo que el usuario ve en pantalla sin necesidad de recargar la página.

¿Has usado alguna de estas propiedades en tus proyectos? Comparte tu experiencia en los comentarios.