Modificar el Contenido de un Elemento con JavaScript

En el desarrollo web moderno las interfaces dinámicas requieren cambios constantes en el contenido de la página sin necesidad de recargarla. Desde actualizar el mensaje de bienvenida de un usuario hasta modificar la descripción de un producto en una tienda en línea, la manipulación del texto y el contenido HTML es una tarea fundamental en JavaScript.

Para lograr esto, existen diversas formas de modificar el contenido de un elemento en el DOM, siendo textContent e innerHTML las dos más utilizadas. Ambas permiten actualizar el contenido de un nodo, pero con diferencias clave en funcionalidad, seguridad y rendimiento.

En este artículo, exploraremos cómo funcionan estas propiedades, cuándo es mejor usar cada una y qué errores debemos evitar al manipular el contenido de una página web de forma eficiente.

Modificar el Contenido con textContent

La propiedad textContent nos permite establecer o recuperar el texto dentro de un nodo sin interpretar etiquetas HTML. Esto significa que todo lo que se asigne será tratado como texto plano, incluso si contiene etiquetas.

Este método es ideal cuando solo queremos actualizar el contenido de un elemento sin necesidad de modificar su estructura HTML.

elemento.textContent = "Nuevo texto";

• Si asignamos un valor, reemplaza todo el texto dentro del elemento.
• Si lo usamos sin asignar, nos devuelve el contenido textual del elemento.

Ejemplo: Modificar el texto de un párrafo

Supongamos que tenemos el siguiente HTML:

<p id="mensaje">Hola, bienvenido.</p>
<button onclick="actualizarTexto()">Actualizar</button>

Podemos modificar su contenido con textContent de la siguiente manera:

function actualizarTexto() {
  const parrafo = document.getElementById("mensaje");
  parrafo.textContent = "¡Texto actualizado con textContent!";
}

Después de hacer clic en el botón, el contenido del <p> cambiará a:

<p id="mensaje">¡Texto actualizado con textContent!</p>

📌 Importante: Si el párrafo contenía etiquetas HTML dentro, textContent las tratará como texto en bruto en lugar de interpretarlas.

const div = document.getElementById("contenedor");
div.textContent = "<strong>Hola</strong>";

Salida en el DOM:

<div id="contenedor"><strong>Hola</strong></div>

El texto aparece tal cual, sin aplicar la negrita.

Modificar el Contenido con innerHTML

La propiedad innerHTML nos permite modificar el contenido de un elemento incluyendo etiquetas HTML, lo que permite insertar listas, imágenes o cualquier otra estructura.

Este método es útil cuando necesitamos agregar contenido con formato o modificar la estructura de un elemento.

elemento.innerHTML = "<strong>Nuevo contenido</strong>";

• Si asignamos un valor, reemplaza todo el contenido interno con el HTML especificado.
• Si lo usamos sin asignar, nos devuelve el contenido HTML dentro del elemento.

Ejemplo: Insertar contenido HTML en un div

Supongamos que tenemos este HTML:

<div id="contenido"></div>
<button onclick="insertarHTML()">Insertar contenido</button>

Podemos agregar HTML dinámicamente con innerHTML:

function insertarHTML() {
  const contenedor = document.getElementById("contenido");
  contenedor.innerHTML = "<p><strong>Este es un párrafo en negrita</strong></p>";
}

Salida en el DOM:

<div id="contenido">
  <p><strong>Este es un párrafo en negrita</strong></p>
</div>

Nota importante: innerHTML interpreta las etiquetas, lo que nos permite agregar listas, imágenes o botones dentro de un elemento.

Diferencias entre textContent e innerHTML

Aunque ambas propiedades sirven para modificar el contenido de un elemento, presentan diferencias importantes en funcionalidad y seguridad.

1. Interpretación de HTML

• textContent → Solo maneja texto plano y no reconoce etiquetas HTML.
• innerHTML → Interpreta y renderiza etiquetas HTML dentro del elemento.

const div = document.getElementById("contenedor");
div.textContent = "<strong>Hola</strong>";  // ❌ Muestra el texto con las etiquetas visibles
div.innerHTML = "<strong>Hola</strong>";  // ✅ Renderiza el texto en negrita

2. Seguridad

• textContent: Es más seguro porque no ejecuta código HTML ni JavaScript dentro de las cadenas de texto.
• innerHTML: Puede ser peligroso si se usa con datos sin sanitizar, ya que permite la inyección de scripts maliciosos (ataque XSS).

Ejemplo de código inseguro con innerHTML:

const usuario = "<script>alert('Hackeado');</script>";
document.getElementById("saludo").innerHTML = usuario;

3. Rendimiento

• textContent: Es más rápido porque solo reemplaza el texto dentro del elemento.
• innerHTML: Es más lento, ya que el navegador debe interpretar y procesar el HTML insertado.

Ejemplo de mal rendimiento con innerHTML:

const lista = document.getElementById("lista");
for (let i = 1; i <= 1000; i++) {
  lista.innerHTML += `<li>Elemento ${i}</li>`;  // ❌ Ineficiente: reescribe toda la lista en cada iteración
}

Forma eficiente usando textContent y createElement():

const lista = document.getElementById("lista");
for (let i = 1; i <= 1000; i++) {
  const nuevoElemento = document.createElement("li");
  nuevoElemento.textContent = `Elemento ${i}`;
  lista.appendChild(nuevoElemento);  // ✅ Agrega solo el nuevo nodo sin reescribir toda la lista
}

Conclusión

Modificar el contenido de un elemento en el DOM es una tarea esencial en el desarrollo web y elegir entre textContent e innerHTML depende del contexto en el que trabajemos.

Si solo necesitamos modificar texto sin etiquetas y queremos una solución segura y rápida, textContent es la mejor opción. Por otro lado, si queremos agregar HTML estructurado dentro de un elemento, innerHTML nos permite hacerlo con facilidad, aunque debemos tener precaución con la seguridad.

En el siguiente artículo exploraremos las diferencias entre innerHTML y createElement() al crear nuevos elementos en el DOM.