Cambiar contenido de un elemento HTML con JavaScript

Estoy seguro de que navegando por webs, te habrás dado cuenta de que en ocasiones al hacer click en un botón el texto cambia, aparece un mensaje o quizá se actualiza un contador, todo eso sin recargar la página. Algo que cuando estás empezando en el mundo del desarrollo web puede resultar desconcertante.

Detrás de esa aparente magia hay algo bastante sencillo, que es modificar el contenido de un elemento del DOM con JavaScript. La complejidad en todo caso estará en el proyecto en cuestión.

Por este motivo, en este artículo quiero explicarte cómo hacerlo bien, qué opciones tienes y qué diferencias hay entre ellas. Es un concepto básico, pero fundamental. Si entiendes esto, empiezas a dominar de verdad la interacción en una web.

Qué significa realmente «cambiar el contenido» de un elemento

Cuando hablamos de cambiar el contenido de un elemento HTML, en realidad estamos diciendo que vamos a modificar lo que hay dentro de sus etiquetas.

Por ejemplo:

<p id="mensaje">Hola mundo</p>

Ese texto «Hola mundo» es el contenido del elemento <p>, un párrafo normal y corriente que tiene un identificador para que pueda ser localizado.

Con JavaScript se puede acceder al DOM (Document Object Model), localizar ese elemento y sustituir lo que hay dentro por otra cosa. Puede ser texto plano, puede ser HTML e incluso puede generarse dinámicamente en función de una acción del usuario.

Aquí es donde entran en acción las tres propiedades más habituales que podemos utilizar para esta labor durante el desarrollo de un portal:

• textContent
• innerHTML
• innerText

Aunque a priori su comportamiento pueda parecer similar, como veremos más adelante, no son exactamente lo mismo. Por este motivo conviene entender la diferencia antes de empezar a usarlas sin pensar.

Propiedades textContent, innerHTML e innerText: qué cambia en cada caso

Para ver estas tres propiedades, vamos a partir del mismo ejemplo que puse antes, ya que contiene todo lo necesario para poder trabajar con él en el DOM:

<p id="mensaje">Hola mundo</p>

Lo primero que necesitamos hacer es seleccionarlo con JavaScript a través de su identificador, que en este caso, en un alarde de originalidad, se llama «mensaje»:

const elemento = document.getElementById("mensaje");

A partir de aquí podemos modificar su contenido de varias formas que veremos a continuación.

Propiedad textContent

Con esta propiedad podemos sustituir completamente el contenido del interior por texto plano, exclusivamente. De modo que deberás evaluar previamente el tipo de contenido que quieres meter.

elemento.textContent = "Nuevo texto desde JavaScript";

Si incluyes etiquetas HTML dentro del string, se mostrarán como texto literal, es decir, no se interpretarán y aparecerán los caracteres como si fueran texto.

Esta es la opción más segura y en la mayoría de los casos, la más recomendable cuando solo quieres cambiar texto sencillo, como podría ser el de un botón.

Propiedad innerHTML

Para cuando el contenido que necesitamos cambiar es más complejo, podemos usar innerHTML. Aquí sí se interpretan las etiquetas HTML.

elemento.innerHTML = "<strong>Texto en negrita</strong>";

En este caso, el texto aparecería en negrita. Es muy útil cuando necesitas generar estructura HTML dinámicamente, pero hay que usarlo con cuidado. Si introduces contenido que proviene del usuario sin validarlo, puedes abrir la puerta a problemas de seguridad (XSS).

Como desarrollador web, este es uno de esos detalles que no puedes ignorar a la hora de implementarlo en tu proyecto.

Propiedad innerText

innerText es similar a textContent, pero tiene en cuenta el estilo visual y el contenido visible. En la práctica moderna, casi siempre es preferible usar textContent, ya que es más consistente y predecible.

En cualquier caso, si estás empezando, puedes quedarte con esta idea simple:

• Solo texto → textContent
• Necesitas HTML → innerHTML

Con eso cubres el 90% de los casos reales que vas a encontrarte en los proyectos. Decidir si usar una propiedad u otra te tocará a ti hacerlo en base a tus necesidades.

Ejemplo práctico: cambiar el texto al hacer clic

Ahora vamos a hacer algo sencillo pero realista que te ayude a entender mejor cómo se aplican las propiedades que hemos visto. Vamos a hacer un botón que cambie el mensaje cuando el usuario haga clic.

HTML:

<p id="mensaje">Texto original</p>
<button id="boton">Cambiar mensaje</button>

JavaScript:

const mensaje = document.getElementById("mensaje");
const boton = document.getElementById("boton");

boton.addEventListener("click", function () {
    mensaje.textContent = "El texto ha sido cambiado correctamente";
});

Aquí están pasando varias cosas importantes y conviene aclarar qué es lo que está pasando. El orden de procesamiento es:

1. Seleccionamos los elementos «mensaje» y «boton».
2. Escuchamos el evento «click».
3. Modificamos el contenido cuando ocurre la acción.

Todo esto ocurre en el navegador del usuario, sin necesidad de hacer ninguna petición al servidor. Este tipo de lógica es la base de cualquier interfaz dinámica y podemos verla en multitud de comportamientos habituales.

Ejemplo más dinámico: contador simple

Vamos a subir ligeramente el nivel y hacer algo un poco más interesante que el ejemplo anterior. Haremos un contador de clics en el botón.

HTML:

<p id="contador">0</p>
<button id="sumar">Sumar 1</button>

JavaScript:

let valor = 0;

const contador = document.getElementById("contador");
const botonSumar = document.getElementById("sumar");

botonSumar.addEventListener("click", function () {
    valor++;
    contador.textContent = valor;
});

Cada vez que haces clic, el número aumenta. Aquí ya no estamos poniendo un texto fijo, sino actualizando el contenido en función de una variable.

Este patrón es extremadamente común en desarrollo web. Formularios, carritos de compra, validaciones, notificaciones… todo parte de esta misma base.

Errores comunes que conviene evitar

En programación, se dan habitualmente una serie de errores que son muy recurrentes y cuando manejamos elementos con JavaScript no nos salvamos de ello. Cuando alguien me dice que «no funciona», casi siempre ocurre alguna de estas cosas:

• El script se ejecuta antes de que el DOM esté cargado.
• El id no coincide exactamente.
• El elemento no existe.
• Se está usando innerHTML sin necesidad.

De base te doy un consejo práctico: coloca el <script> justo antes del cierre de </body> o usa el evento DOMContentLoaded para asegurarte de que el DOM está disponible.

Por ejemplo:

document.addEventListener("DOMContentLoaded", function () {
    const mensaje = document.getElementById("mensaje");
    mensaje.textContent = "Contenido modificado correctamente";
});

Esto evita muchos dolores de cabeza cuando estás empezando y es especialmente recomendable en proyectos donde la página tarda en cargar.

Esto evita muchos dolores de cabeza cuando el script se ejecuta antes de que el DOM esté completamente construido, algo común en portales que tienen mucha carga.

Más importante de lo que parece

Cambiar el contenido de un elemento no es solo una técnica puntual. Es la base de la interactividad en prácticamente cualquier página web.

Da igual que estés trabajando en una web corporativa, en el diseño de tiendas online o en un proyecto más complejo con frameworks modernos. De hecho, incluso los frameworks modernos abstraen este comportamiento, pero por debajo siguen haciendo exactamente lo mismo: modificar el DOM.

En mi caso, como desarrollador web freelance, este tipo de lógica forma parte del día a día. Aunque luego trabajes con React, Vue o cualquier framework, entender bien cómo funciona el DOM «a pelo» te da una base sólida y te permite detectar problemas con mucha más facilidad.

Si estás aprendiendo JavaScript, este es uno de esos conceptos que conviene practicar hasta que lo hagas sin pensar. Porque cuando lo dominas, empiezas a sentir que realmente controlas lo que ocurre en la página.