Cambiar el texto de un Div usando Javascript

Para cambiar el texto que muestra un div, selecciónalo y asigna una cadena a su propiedad textContent. La cadena se trata como texto, incluso si contiene caracteres como < o >.

Cambiar el texto de un div con textContent

En una página del navegador, coloca el script después del elemento o ejecútalo cuando el documento ya se haya cargado. El selector debe coincidir con el div que quieres modificar.

<div id="message">Welcome</div>
<script>
  const message = document.querySelector("#message");
  message.textContent = "Hello, world!";
</script>

El ejemplo del navegador actualiza la página real: el div muestra primero “Welcome” y, después de la asignación, “Hello, world!”. Esas etiquetas visibles permanecen en inglés en el ejemplo sin cambios. Para ver una pequeña demostración en JavaScript de la asignación de la propiedad y del valor mostrado, ejecuta:

const div = { textContent: "" };
div.textContent = "Hello, world!";
console.log(div.textContent);

Hello, world!

Este ejemplo ejecutable usa un objeto simple para mostrar la asignación de la propiedad y su salida; el ejemplo HTML muestra cómo actualizar una página real. Asignar un valor a textContent reemplaza los nodos secundarios del elemento por un nodo de texto que contiene la nueva cadena. Úsalo cuando necesites texto sin formato, sobre todo si el valor procede de un usuario o de otra fuente no confiable.

Elegir entre textContent e innerHTML

Usa textContent para texto. innerHTML analiza como HTML la cadena que se le asigna y reemplaza los elementos secundarios con los nodos resultantes, así que elígelo solo cuando quieras insertar marcado. Insertar datos no confiables en un contexto que analiza HTML puede generar un riesgo de scripting entre sitios (XSS); analizar marcado no significa que cualquier cadena ejecute código automáticamente.

Por ejemplo, si asignas la cadena <strong>Hi</strong> a textContent, esos caracteres se muestran literalmente. Si la asignas a innerHTML, se crea un elemento strong y el navegador muestra “Hi” en negrita. Si necesitas marcado, mantenlo separado de los valores no confiables y usa un método de representación seguro y adecuado.

Usar otros métodos de JavaScript para actualizar texto

innerText obtiene o establece el texto representado y puede reflejar los estilos y la disposición de la página; úsalo cuando ese comportamiento sea importante. Para sustituir texto de forma sencilla, textContent suele ser más claro.

Puedes crear un nodo de texto con createTextNode y reemplazar los elementos secundarios existentes por ese nodo al construir contenido del DOM paso a paso. Las plantillas literales, delimitadas con acentos graves, ayudan a formar cadenas dinámicas; al asignar la cadena resultante a textContent, sigue tratándose como texto. Si la página ya carga jQuery, $("#message").text("Hello, world!") establece el texto del elemento seleccionado. Si no usas jQuery, recurre a las API del DOM del navegador mostradas arriba.

Usar contenido generado por CSS para texto decorativo

Los pseudo-elementos CSS ::before y ::after pueden añadir adornos visuales, como una pequeña etiqueta junto a un elemento. El contenido generado no actualiza con JavaScript el texto del DOM del div, y no es adecuado para información esencial ni contenido interactivo. Algunos elementos reemplazados, como img, no muestran contenido generado del mismo modo que los elementos ordinarios. Usa textContent cuando el texto deba formar parte del contenido real de la página.