Mostrar una variable de JavaScript en el cuerpo HTML

Para mostrar una variable de JavaScript como texto en una página, selecciona un elemento HTML existente y asigna el valor a su propiedad textContent. Esto actualiza el elemento en el cuerpo del documento; no abre un cuadro de diálogo. Coloca el script después del elemento de destino o haz que se ejecute cuando el documento ya se haya procesado.

Mostrar una variable de JavaScript en el cuerpo HTML con textContent

El siguiente ejemplo coloca la variable en un párrafo. Como el script en línea está después de ese párrafo, document.getElementById("greeting") puede encontrar el elemento cuando se ejecuta la asignación. Cambia name por el valor que quieras mostrar. El navegador presenta «Hello, Robert!» como texto normal en la página. Esa etiqueta permanece en inglés en el ejemplo sin modificar.

Ejecuta este ejemplo:

const output = { textContent: "" };
const document = {
  getElementById(id) {
    return id === "greeting" ? output : null;
  }
};
const name = "Robert";
document.getElementById("greeting").textContent = `Hello, ${name}!`;
console.log(output.textContent);

Hello, Robert!

Este ejemplo ejecutable y breve usa un sustituto mínimo de un elemento para que la asignación pueda ejecutarse en un entorno de JavaScript. En un navegador, usa el elemento real del DOM, como se muestra aquí:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Greeting</title>
</head>
<body>
  <p id="greeting"></p>
  <script>
    const name = "Robert";
    document.getElementById("greeting").textContent = `Hello, ${name}!`;
  </script>
</body>
</html>

Para mostrar texto sin formato, textContent es la opción más clara. Reemplaza el contenido secundario del elemento seleccionado por texto, de modo que los caracteres de una variable que parecen etiquetas se muestran tal cual, en vez de interpretarse como HTML. Si el selector no encuentra ningún elemento, revisa la estructura de la página o el momento en que se ejecuta el script: comprueba que el ID coincida y que el elemento de destino exista antes de la asignación. Un script externo clásico en el encabezado del documento puede usar defer para ejecutarse después de que se haya procesado el documento. defer no retrasa un script clásico en línea. Si un script en línea está en el encabezado, espera a que exista el elemento de destino —por ejemplo, escuchando el evento DOMContentLoaded— o coloca el script después del elemento, como en el ejemplo anterior.

Usa innerHTML solo para insertar HTML de confianza

innerHTML interpreta el valor asignado como marcado y reemplaza los nodos secundarios del elemento. Esto resulta útil cuando el valor debe ser HTML que controlas, como un elemento de énfasis creado intencionalmente. Para un nombre, un mensaje u otra variable de texto sin formato, sigue usando textContent: interpretar como marcado texto externo o proporcionado por usuarios puede crear una vulnerabilidad de scripting entre sitios.

Por ejemplo, asignar "<strong>Hello</strong>" a textContent muestra los signos angulares y la etiqueta como texto. Asignar la misma cadena a innerHTML crea un elemento Hello en negrita. Elige según si el valor debe ser texto o marcado de confianza, y evita construir HTML concatenando valores que no sean de confianza.

Por qué document.write() y window.alert() no equivalen a mostrar texto en el cuerpo de la página

document.write() es un método que escribe en el flujo del documento mientras el navegador procesa la página. Puede parecer que funciona en un ejemplo ejecutado durante ese procesamiento, pero no es adecuado para actualizar un elemento existente. Si lo llamas después de que se haya cargado el documento, puede reemplazarlo; por eso, para las actualizaciones habituales de la página, usa métodos del DOM como textContent.

window.alert() también es un método, pero muestra un cuadro de diálogo temporal que el lector debe cerrar. Su valor no se inserta en el cuerpo HTML de la página y, mientras el cuadro está abierto, interrumpe la interacción. Úsalo solo cuando un cuadro de diálogo sea apropiado; si quieres que un valor permanezca visible en la página, usa textContent.