Crear elementos: cabeceras, párrafos, listasy tablas con Javascript DOM
Javascript ya no es un lenguaje nuevo, tampoco un lenguaje obsoleto, actualmente es un lenguaje muy útil, en el ejemplo de hoy les enseñare como hacer una pagina web sencilla con puro javascript, asi es, todo esto gracias al DOM (Document Object Model – Modelo de Objetos del Documento).
Crear elementos con javascript no es un simple ejercicio, debido a la creciente demanda del lenguaje javascript muchas veces es necesario crear contenido dinámico y esto lo vamos a lograr con el DOM, al hablar de contenido dinámico hablamos de contenido que se crear en vivo, mientrar el usuario navega en la pagina, sin cambiar de pagina el contenido simplemente aparece.
Hola Mundo!
Vamos a crear un pequeño ejemplo de Hola Mundo creando el documento básico y unas lineas de javascript:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <body> | |
| <script> | |
| var body = document.body; | |
| var h1 = document.createElement("h1"); | |
| h1.innerHTML = "Hola Mundo!"; | |
| body.appendChild(h1); | |
| </script> | |
| </head> | |
| </body> | |
| </html> |
Con este ejemplo vamos a lograr imprimir el texto Hola Mundo! en una etiqueta h1, describire el codigo:
- La palabra document hace referencia a todo lo que ocurre en la pagina o documento.
- En la linea 5: creo un alias para document.body dentro de la variable body.
- En la linea 6: Uso document.createElement(“h1”) para crear una etiqueta o elemento H1 y guardo el contexto de ese elemento en la variable h1.
- Linea 7: Asigno el texto que quiero mostrar en la etiqueta H1, podemos ver que el atributo innerHTML hace referencia al texto por mostrar.
- Linea 8: Agrego el elemento guardado en la variable h1 al cuerpo de la pagina, mediante el método appendChild de la variable body.
De la manera que creamos el elemento h1, podemos hacer lo mismo con las etiquetas h2-h6, p,b,i, y etiquetas similares.
Listas
Vamos a crear un ejemplo de listas usando listas ordenadas y no ordenadas:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <body> | |
| <script> | |
| var body = document.body; | |
| var h1 = document.createElement("h1"); | |
| h1.innerHTML = "Prueba de listas"; | |
| // lista no ordenada | |
| var hul = document.createElement("h3"); | |
| hul.innerHTML = "Lista no ordenada"; | |
| var list1 = document.createElement("ul"); | |
| for(i=0;i<10;i++){ | |
| var li = document.createElement("li"); | |
| li.innerHTML = "elemento #"+i; | |
| list1.appendChild(li); | |
| } | |
| // lista ordenada | |
| var hol = document.createElement("h3"); | |
| hol.innerHTML = "Lista ordenada"; | |
| var list2 = document.createElement("ol"); | |
| for(i=0;i<10;i++){ | |
| var li = document.createElement("li"); | |
| li.innerHTML = "elemento #"+i; | |
| list2.appendChild(li); | |
| } | |
| body.appendChild(h1); | |
| body.appendChild(hul); | |
| body.appendChild(list1); | |
| body.appendChild(hol); | |
| body.appendChild(list2); | |
| </script> | |
| </head> | |
| </body> | |
| </html> |
- Linea 9-17: definimos el código de la lista no ordenada
- Linea 19-27: Definimos el código de la lista ordenada.
- Linea 29-33: Agregamos los elementos que hemos creado al cuerpo del documento.
Debemos notar que al momento de crear las etiquetas ol o ul, para agregar los elementos li que corresponden a cada lista usamos la función appendChild en los objetos de las etiquetas ol o ul.
Es muy importante, el orden a la hora de agregar los elementos en el documento, es decir cuando usamos la función appendChild, los elementos se van a agregar al documento en el orden en el que ejecutamos la función appendChild.
Tablas
En el siguiente ejemplo veremos un ejemplo de una tabla creada dinamicamente usando el DOM:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <body> | |
| <script> | |
| var body = document.body; | |
| var h1 = document.createElement("h1"); | |
| h1.innerHTML = "Prueba de tablas"; | |
| var table1 = document.createElement("table"); | |
| table1.border="1"; | |
| // ciclo correspondiente a la filas | |
| for(i=0;i<10;i++){ | |
| var trx = document.createElement("tr"); | |
| // ciclo correspondiente a las columnas | |
| for(j=0;j<5;j++){ | |
| var tdx = document.createElement("td"); | |
| tdx.innerHTML = "Fila " + i + " – Columna " + j; | |
| trx.appendChild(tdx); | |
| } | |
| table1.appendChild(trx); | |
| } | |
| body.appendChild(h1); | |
| body.appendChild(table1); | |
| </script> | |
| </head> | |
| </body> | |
| </html> |
La tabla lo creamos a partir de 2 ciclos for, el primer ciclo for corresponde a las filas, con este ciclo creamos 10 filas, con el segundo ciclo, el cual es un ciclo anidado dentro del primer ciclo, crearemos las columnas, 5 columnas por cada fila, logrando una tabla de 10 filas y 5 columnas.
Conclusión
Con esto me despido por hoy, espero que con estos sencillos ejemplos ustedes puedan hacer uso de ellos para bien o para mal :).
Solo es cuestión de practicar para crear contenido dinámico, mas adelante en la segunda parte veremos como darle estilo a los elementos que crearemos usando el puro DOM de Javascript.
Espero sus dudas, comentarios, sugerencias, etc.
Les invito a compartir el conocimiento con sus amigos, familia, conocidos, grupo de trabajo y a todo el mundo.