Cómo cambiar texto en JavaScript

Para cambiar texto en una página existente, primero hay que seleccionar el elemento DOM correcto. Usa getElementById() cuando el elemento tenga un id conocido y único: busca por ID, no por nombre de clase. Los ID de HTML deben ser únicos en un documento. El método devuelve un solo elemento (o null si no hay coincidencias), en lugar de actualizar todos los elementos que por casualidad compartan un ID.

Una vez seleccionado el elemento, decide si el texto nuevo debe reemplazar el contenido actual o añadirse después. textContent es una propiedad para leer o establecer texto. createTextNode() crea un nodo de texto y appendChild() lo añade a un elemento.

Cambiar el texto de un elemento con textContent

Asigna un valor a textContent cuando el elemento deba mostrar un texto nuevo en lugar de su contenido actual. El setter reemplaza el contenido hijo del elemento por texto; no interpreta la cadena asignada como HTML. Si la cadena contiene caracteres como < y >, permanecen como texto y no se convierten en marcado.

Este ejemplo completo incluye una pequeña representación de un elemento para que JavaScript pueda ejecutarse por sí solo. En una página del navegador, selecciona el elemento existente con document.getElementById("message") y aplica la misma asignación.

Ejecuta este ejemplo. El mensaje que muestra el ejemplo permanece en inglés: «Hello, JavaScript!».

class TextElement {
  constructor(textContent) {
    this.textContent = textContent;
  }
}

const elements = { message: new TextElement("Before") };
const document = {
  getElementById(id) {
    return elements[id] ?? null;
  },
};

const message = document.getElementById("message");
if (message) {
  message.textContent = "Hello, JavaScript!";
}
console.log(message.textContent);

La comprobación contempla la ausencia del elemento: si el ID no coincide, getElementById() devuelve null y se omite la asignación. En una aplicación, puedes gestionar ese caso explícitamente, por ejemplo, mostrando un error o comprobando que el script se ejecute después de que el elemento se haya añadido al documento.

Añadir texto con createTextNode() y appendChild()

Para conservar el texto existente y añadir más a continuación, crea un nodo de texto y añádelo al elemento seleccionado. Esto no reemplaza los hijos actuales del elemento. El siguiente ejemplo independiente representa las operaciones DOM pertinentes; en un navegador, usa document.createTextNode() y el elemento que devuelve document.getElementById().

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

class TextElement {
  constructor(textContent) {
    this.textContent = textContent;
  }

  appendChild(node) {
    this.textContent += node.textContent;
    return node;
  }
}

const elements = { message: new TextElement("Hello, ") };
const document = {
  getElementById(id) {
    return elements[id] ?? null;
  },
  createTextNode(text) {
    return { textContent: text };
  },
};

const message = document.getElementById("message");
if (message) {
  const addedText = document.createTextNode("JavaScript!");
  message.appendChild(addedText);
}
console.log(message.textContent);

El nodo añadido aporta su texto después del que ya contiene el elemento. Este patrón resulta útil para agregar una etiqueta breve, un mensaje de estado u otro texto sin perder el contenido existente. El ejemplo conserva «Hello, » y añade «JavaScript!»; ambas cadenas permanecen en inglés dentro del bloque de código. Si el script puede ejecutarse antes de que exista el elemento de destino, espera a que la página lo cree o gestiona el resultado null antes de añadir el nodo.

Elegir entre reemplazar y añadir texto

Usa textContent = value cuando el elemento deba mostrar únicamente el texto nuevo. Usa createTextNode(value) junto con appendChild() cuando quieras conservar el contenido existente y añadir el texto nuevo a continuación. Son operaciones distintas: asignar la propiedad reemplaza el contenido hijo, mientras que añadir un nodo agrega otro hijo.

Ambas opciones tratan el valor proporcionado como texto en lugar de analizarlo como HTML. Si el texto lo proporciona el usuario, estas API evitan convertir ese valor en marcado; esto no sustituye las demás prácticas de seguridad que pueda necesitar tu aplicación. Usa getElementById() con el ID del elemento de destino, comprueba si no hay coincidencia cuando el momento de ejecución o el marcado condicional puedan hacer que falte y, después, elige entre reemplazar o añadir según quieras conservar o no el texto anterior.