JavaScript - Crear multiples divs

   
Vista:

Crear multiples divs

Publicado por Dario (2 intervenciones) el 17/07/2014 00:53:29
Buen día a todo aquel dispuesto a ayudarme...

Recién entrando al mundo de js quisiera saber como crear múltiples div, sin tener que definirlos uno por uno, algo así como dentro de un while, for, etc. Únicamente con propósitos educativos...

Este es mi intento de novato:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!Doctype html>
<head>
	<title></title>
		<style type="text/css">
 
			* {
				margin:0px;
				padding:0px;
			}
 
			.Block {
				float: left;
				display:block;
				margin-left: 0.2em;
				width: 2em;
				height: 2em;
				border: solid;
				border-color: #E5E5E5;
				border-radius: 10px 10px 10px 10px;
				box-shadow: 2px 2px 2px #000000;
			}
 
			.Block:hover {
				border: solid;
				border-color: #00FF0D;
				border-radius: 10px 10px 10px 10px;
				background-color: rgb(255,255,218);
			}
		</style>
 
</head>
<body>
	<script type="text/javascript">
		function Bloques() {
			var fila = new array();
			var z = 0;
			while (z < 10) {
				fila[z] = document.createElement('div');
				fila[z].className = 'Block';
				document.body.appendChild(fila[z]);
				z++;
			}
		}
		window.onload = Bloques();
	</script>
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Crear multiples divs

Publicado por Fulano (3 intervenciones) el 17/07/2014 01:42:15
Utiliza jquery
<div class="container"></div>
<script type="text/javascript">
function Bloques() {
var z = 0;
while (z < 10) {
$("<div>").attr("id",z).addClass("Block").appendTo(".container");
z++
}
}
window.onload = Bloques();
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Crear multiples divs

Publicado por Dario (2 intervenciones) el 17/07/2014 03:04:56
Supuse que te falto el ";" después del "z++" pero aun así, no funciona...

No va "$("<div>").attr("id",z).addClass("Block").appendTo("#container");" osea #container en ves de .container?
Nose, no entiendo nada, pero por ai le acierto
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar