Generar un documento HTML mediante JavaScript

28/Jun/2007 JavaScript , , 10 Comentarios

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.

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...

  1. <form action="">
  2. Nombre: <input type="text" id="nombre">
  3. Edad: <input type="text" id="edad">
  4. <input type="button" onClick="crearDocumento(getElementById('nombre').value,
  5. getElementById('edad').value);" value="Crear documento">
  6. </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.

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:

  1. var doc = document.open("text/html","replace");

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

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

  1.  
  2. Contenido
  3.  
  4. </BODY>
  5. </HTML>

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

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

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.

  1. doc.write(texto);

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

  1. doc.close();

Vídeos sobre Javascript


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

10 comentarios en “Generar un documento HTML mediante JavaScript”

Víctor Cuervo

Melvin

como puedo hacer esto guardando el documento asi como ya mencionaste … con asp.net estoy trabajando en algo parecido y quiero generar paginas automaticamente y que se puedan accesar via un link … asi como en php … pero no se php… me dejarias saber?

Víctor Cuervo

Víctor Cuervo

Hola Melvin,

Lo que generas en Javascript en el cliente no puedes guardarlo. Bueno, podrías enviarlo a un servidor para que lo guarde, pero en este caso creo que sería mejor hacer las cosas en el servidor como estás haciendo ahora.

En ASP.Net puedes generar las páginas al vuelo y atendiendo a lo que te pidan construir dinámicamente la página. No hace falta que crees nada en PHP si no lo conoces. ASP.Net sería suficiente.

Saludos.

Víctor Cuervo

nasario

Hola excelente tutorial, como podría hacer que la pagina se abra en un nueva pestaña?

Víctor Cuervo

Víctor Cuervo

@nasario,

Valdría con añadir el atributo target=”_blank” al formuario.

Saludos.

Víctor Cuervo

Víctor Cuervo

Hola @silo,

La página generada realmente no existe, si no que es creada al vuelo por una primera página. Esta primera página es a la que realmente se puede llamar.

Esto sirve para montar cosas al vuelo. Aunque es más recomendable hacerlo mediante páginas de servidor en vez de en local.

Víctor Cuervo

silo

Muy instructivo, pero entonces ¿cómo se puede utilizar la página web generada con javascript?, ¿se puede enviar o abrir por medio de un link dentro de las páginas del sistema?

Sería muy interesante saber las posibilidades que este documento tiene.

Muchas gracias.

Víctor Cuervo

lineadecodigo

@Jon,

Como te comente Juan, no puedes hacerlo por motivos de seguridad. Si quieres hacer páginas dinámicas que se salven deberás utilizar un lenguaje de servidor PHP, Java, ASP.Net,…

Víctor Cuervo

Juan

Jon, por cuestiones de seguridad, javascript no puede acceder al sistema de archivos, por lo cual la pagina creada no se puede salvar.

Víctor Cuervo

Jon

Gracias por adelantado

Víctor Cuervo

Jon

Necesito ayuda!!

Este codigo crea una nueva pagina html dinamicamente.

¿Alguien sabria como salvar la pagina creada, tambien dinamicamente?

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*