011. DOM: Modificando Elementos (Old Style)

En los capítulos anteriores hemos trabajado con la manipulación del DOM, como poder crear elementos de manera dinámica, vimos el método createElement(), los fragmentos, los templates.

Hasta ahora sólo hemos visto un método para poder agregar elementos dinámicos, que ha sido el método appenChild(), que agrega el elemento al final del selector objetivo. Sin embargo existen otros métodos que permiten reemplazar o insertar al inicio, o insertarlo en una posición en particular, para ello vamos a hacer uso de las propiedades del DOM Traversing para poder tener esa interacción.

En este capítulo veremos los métodos antiguos, los que siempre han existido, y en el siguiente capítulo veremos lo que se denomina el cool style o las nuevas formas de hacerlo, de hecho, si conocemos jQuery, van a recordar a la sintaxis del mismo.

Además del método appenChild() existen los siguientes métodos:

  • replaceChild(«nuevo elemento»,»viejo elemento»): reemplaza nuevo elemento por viejo elemento.
  • insertBefore(«nuevo elemento», «viejo elemento»): inserta el nuevo elemento antes del elemento que le pasemos como referencia (viejo elemento).
  • removeChild(«elemento»): elimina el elemento que le pasemos como parámetro.
  • cloneNode(true / false): clona el o los elementos a los que haga referencia.

Veamos un ejm para comprender la sintaxis de estos métodos

Ejm

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root {
--yellow-color: #f7df1e;
--dark-color: #222;
}

.cards {
border: thin solid var(--dark-color);
padding: 1rem;
}

.card {
display: inline-block;
background-color: var(--dark-color);
color: var(--yellow-color)
}

.card figcaption {
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
}

.rotate-45 {
transform: rotate(45deg);
}

img {
width: 250px;
height: 300px;
}
</style>
</head>
<body>
<h1>Creando elementos dinámicamente</h1>
<section class="cards">
<figure class="card">
<img src="tech.jpg" alt="Tech">
<figcaption>Tech</figcaption>
</figure>
<figure class="card">
<img src="animals.avif" alt="Animals">
<figcaption>Animals</figcaption>
</figure>
<figure class="card">
<img src="people.avif" alt="People">
<figcaption>People</figcaption>
</figure>
<figure class="card">
<img src="arch.webp" alt="Arch">
<figcaption>Arch</figcaption>
</figure>
<figure class="card">
<img src="nature.jpg" alt="Nature">
<figcaption>Nature</figcaption>
</figure>
</section>

<script>
const $cards = document.querySelector(".cards"),
$newCard = document.createElement("figure");

$newCard.innerHTML = `
<img src="tech.jpg" alt="Tech" />
<figcaption>Tech</figcaption>
`;

$newCard.classList.add("card");

// Reemplazar el tercer elemento
// $cards.replaceChild($newCard, $cards.children[2]);

// Insertar el elemento antes de un nodo que tomemos como referencia
// Vamos a insertar un elemento antes del primero que aparece
$cards.insertBefore($newCard, $cards.firstElementChild);

// Eliminar un elemento
$cards.removeChild($cards.lastElementChild);

// Clonar 
$cloneCards = $cards.cloneNode(true);

document.body.appendChild($cloneCards);
</script>
</body>
</html>
Scroll al inicio