- index.html
- style.css
- script.js
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Clonación de elementos</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="pool">
</div>
<template id="element-template">
<div class="el">
<span><!--Número del elemento--></span>
</div>
</template>
<script src="script.js"></script>
</body>
</html>
CSS
.pool {
display: flex;
flex-wrap: wrap;
min-height: 330px;
margin: 20px;
padding: 10px;
background-color: #e9e9f0;
}
.el {
display: flex;
justify-content: center;
align-items: center;
width: 150px;
height: 150px;
margin-right: 10px;
margin-bottom: 10px;
box-sizing: border-box;
border: 20px solid #3366ff;
background-color: #99b2ff;
color: rgba(255, 255, 255, 0.9);
font: bold 60px "Arial", sans-serif;
text-align: center;
}
.el--green {
background-color: #a3d095;
border: 20px solid #518d3f;
}
JavaScript
// Contenedor de las tarjetas
var pool = document.querySelector('.pool');
// Obtenemos la plantilla de la tarjeta
var template = document.querySelector('#element-template').content;
var element = template.querySelector('div');
// Clonamos los elementos y les damos contenido en un ciclo
// for (var i = 1; i <= 10; i++) {
// var clonedElement = element.cloneNode(true);
// clonedElement.children[0].textContent = i;
// }
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
Consola
ObjetivosRealizado
0
- Descomenta el bloque del ciclo.
- Dentro del ciclo, después de las demás operaciones, agrega
clonedElemental final depool.