El enunciado es el siguiente:
Un div con id animales que funcionará como contenedor de los animales de la página.
Una serie de divs con clase animal que se generarán dinámicamente y se añadirán al contenedor. Cada div tendrá clase animal (lo que le da las características CSS comunes a todos los animales), el id correspondiente al animal que estamos generando (lo que permitirá acceder a él de manera individualizada) y la imagen de fondo con el nombre del animal.
Como la imagen es una imagen 2x2, con una forma de cuadrado, con 2 columnas y 2 filas, he creado una tabla mediante DOM con un div contenedor llamado .
Ahora el problema es el siguiente, ¿cómo asigno a cada celda de la tabla el div con la clase = animal, y el id correspondiente al animal (vaca, cerdo, perro, gato; uno por cada celda).
/*Registro un evento para cuando termine de cargarse el documento se cargen los eventos necesarios.*/
window.onload = crearTabla;
/*Array donde estan definidos los nombres de los animales.*/
var animales = ["cerdo", "vaca", "gato", "perro"];
/*Exclusivamente con DOM, crear una tabla 2x2 (4 elementos-casillas).*/
function crearTabla() {
//Obtener la referencia del elemento body.
var body = document.getElementsByTagName("body")[0];
//Creamos el elemento/objeto que deseamos: <div>.
var div = document.createElement("div");
//Asignamos un id al div creado.
div.setAttribute("id", "animales");
//Agregamos al body el div.
body.appendChild(div);
//Crea un elemento <table> y un elemento <tbody>.
var tabla = document.createElement("table");
var tblBody = document.createElement("tbody");
//Crea las celdas.
for (var i=0; i<2; i++) {
//Crea las hileras de la tabla.
var hilera = document.createElement("tr");
for (var j=0; j<2; j++) {
var celda = document.createElement("td");
var textoCelda = document.createTextNode("Hilera "+i+", Columna "+j);
celda.appendChild(textoCelda);
hilera.appendChild(celda);
}
//Agrega la hilera al final de la tabla (al final del elemento tblbody).
tblBody.appendChild(hilera);
}
//Posiciona el <tbody> debajo del elemento <table>.
tabla.appendChild(tblBody);
//appends <table> into <body>.
div.appendChild(tabla);
//Modifica el atributo "border" de la tabla y lo fija a "2";
tabla.setAttribute("border", "2");
}
html{
height:100%;
}
body{
background-color:#FFE0B2;
margin:0px;
height: 100%;
}
#animales{
width:500px;
margin:0 auto;
background-color:#FF9900;
border-left:2px solid black;
border-right:2px solid black;
}
#animales:after {
content: "";
clear: both;
display: block;
}
.animal{
width:200px;
height:200px;
margin:25px;
float:left;
background-size: contain;
}
.rota{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transition: transform 4s;
-webkit-transition: -webkit-transform 4s;
-moz-transition: -moz-transform 4s;
}
@keyframes gran
{
0%{}
50%{ transform: scale(2,2);}
100%{ transform: scale(1,1);}
}
@-webkit-keyframes gran{
0%{}
50%{ -webkit-transform: scale(2,2);}
100%{ -webkit-transform: scale(1,1);}
}
@-o-keyframes gran{
0%{}
50%{ -o-transform: scale(2,2);}
100%{ -o-transform: scale(1,1);}
}
.grande{
animation: gran 4s ease-out;
-webkit-animation: gran 4s ease-out;
-moz-animation: gran 4s ease-out;
-o-animation: gran 4s ease-out;
}
@keyframes peque
{
0%{}
50%{ transform: scale(0.5,0.5);}
100%{ transform: scale(1,1);}
}
@-webkit-keyframes peque{
0%{}
50%{ -webkit-transform: scale(0.5,0.5);}
100%{ -webkit-transform: scale(1,1);}
}
@-o-keyframes peque{
0%{}
50%{ -o-transform: scale(0.5,0.5);}
100%{ -o-transform: scale(1,1);}
}
.pequenio{
animation: peque 4s ease-out;
-webkit-animation: peque 4s ease-out;
-moz-animation: peque 4s ease-out;
-o-animation: peque 4s ease-out;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Animales!</title>
<link rel="stylesheet" href="style/estilo.css"/>
<script type="text/JavaScript" src="js/animales.js"></script>
</head>
<body>
</body>
</html>
He insertado los nombres "Hilera 0, Columna 0"... para haber pruebas, pero tendrían que ir las imágenes de las fotos en esas celdas/divs.