Generar un documento HTML mediante JavaScript

Aunque parezca raro, desde código JavaScript podemos generar dinámicamente una página HTML. Esto nos dará un gran potencial a la hora de devolver respuestas al usuario. Típicamente le devolveremos un alert o crearemos un nuevo elemento dentro de la página con el resultado de la respuesta. Pero, por qué no, la respuesta puede ser una nueva página HTML, creada dinámicamente.

Crear el formulario

Para poder hacer esto lo primero que vamos a hacer es crear un formulario donde vamos a recoger información del usuario. Será esta información la que utilicemos para crear el documento. Vamos a pedirle un nombre y una edad:

<form name="formulario">
  Nombre: <input type="text" id="nombre" name="nombre"/>
  Edad: <input type="text" id="edad" name="edad"/>
  <input type="button" value="Enviar" onclick="crearDocumento(document.formulario.nombre.value,document.formulario.edad.value);">
</form>

Como podemos ver en el código JavaScript, estamos llamando a la función crearDocumento con los valores del formulario. El contenido de dicha función será el objetivo de este documento.

Abrir el documento

Para crear un documento lo primero que tenemos que hacer es abrirlo. Para ello invocaremos al método open del objeto document. Dicho método recibe como parámetros dos datos. El primero es el mime-type del documento y el segundo sirve para indicar si queremos heredar la historia del documento desde el que se está generando. Así, abriremos el documento de la siguiente forma:

[document.open](http://document.open/)("text/html","replace");

Al abrir un documento HTML, el mime-type que utilizamos es “text/html”.

Crear el contenido

Lo siguiente será crear el contenido del nuevo documento. Al ser un documento HTML, la estructura será la de cualquier documento HTML. Al menos:

<html>
<body>

Contenido

</body>
</html>

Así, en JavaScript lo definiremos de la siguiente forma. Sobre una simple variable:

var texto = "<html><body><h1>Hola " + nombre + "</h1>";
texto = texto + "Tu edad es de " + edad + " años.";
texto = texto + "</body></html>";

Escribir sobre el documento

Con el documento abierto y el texto a volcar definido, lo siguiente será el escribir sobre el documento. Esto lo hacemos mediante el método .write(texto). Sobre el objeto document.

document.write(texto);

Cerrar el documento

Solo nos quedará la ultima cosa, pero no por ello menos importante, que será la de cerrar el documento.

document.close();

Víctor Cuervo

Programador, Arquitecto IT, álter ego de Línea de Código, amante de las tecnologías, generador de conocimiento y facilitador del aprendizaje.

Descarga el código de Generar un documento HTML mediante JavaScript

Pasos que tenemos que dar para poder generar un documento HTML mediante JavaScript.

Descargar código