Teoría
Teoría

Insertar y mover elementos con appendChild

Guardamos la plantilla de las futuras tareas. Falta usarla para crear una tarea nueva en la página. Antes de hacerlo, dejemos un momento la lista y veamos otro método de la API del DOM.

No podemos tomar un mismo elemento y hacer que aparezca varias veces en la página solo con insertarlo una y otra vez. Seguirá siendo un único elemento.

Comprobémoslo con un ejemplo.

Tenemos un bloque con tarjetas. La plantilla de la tarjeta está en una etiqueta template.

<body>
  …
  <template id="element-template">
    <div class="el">
      <span></span>
    </div>
  </template>
</body>

El elemento de la plantilla ya se insertó una vez: ese código está preparado. Intentemos insertar el mismo elemento de nuevo.

Usaremos appendChild, que agrega el nodo indicado al final del elemento padre. Ya trabajamos con este método aquí.

En el código accedemos al hijo del elemento de la plantilla con element.children[0].

Es una opción adecuada en este caso. En este ejercicio y en los tres siguientes, el HTML no cambiará y sabemos que necesitamos el primer hijo. Como children es una colección parecida a un arreglo, podemos obtenerlo por su índice.

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 class="el"> <span>1</span> </div> <div class="el"> <span>2</span> </div> </div> <template id="element-template"> <div class="el"> <span></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'); // Agregamos el contenido de texto a span element.children[0].textContent = 86; // Agregamos el elemento al final del bloque pool pool.appendChild(element); // Descomenta el bloque de abajo // var newElement = document.createElement('div'); // newElement.classList.add('el'); // newElement.classList.add('el--green');

ObjetivosRealizado

Descomenta el bloque que crea el elemento newElement.
Agrega newElement al final de pool con appendChild.
En la siguiente línea, agrega element al final de pool. Observa la posición de los elementos en el bloque.