012. DOM: Modificando Elementos (Cool Style)

En el capítulo anterior vimos los métodos que tenemos para poder insertar no sólo en la parte final del elemento que tengamos como referencia, sino reemplazar elementos, insertar antes de cierto elemento, eliminar elementos y clonar elementos. Estos son los métodos que han existido desde siempre, sin embargo con el avance del estándar han aparecido nuevos métodos, que resuelven de manera más fácil la inserción de elementos donde lo necesitemos.

Existen 3 métodos nuevos, denominados Insert Adjacent (inserta de manera adyacente), que son:

  • insertAdjacentElement(position, el): viene a ser como un appenChild() o como un insertBefore(), agrega un elemento HTML.
  • insertAdjacentHTML(position, html): viene a ser como un innerHTML(), agrega contenido HTML.
  • insertAdjacentText(position, text): viene a ser como un textContent, inserta texto plano.

Como podemos ver, reciben dos parámetros, el primero es la posición, y el segundo parámetro es el elemento.

Y las posiciones donde podemos colocarlos son 4, que son las siguientes:

  • beforebegin: hermano anterior
  • afterbegin: primer hijo
  • beforeend: ultimo hijo
  • afterend: hermano siguiente

Trabajemos con estos elementos haciendo una serie de ejms.

Ejm

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cool Style</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 (Cool Style)</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");

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

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

// Incluir contenido nuevo
$newCard.insertAdjacentHTML("afterbegin", $contentCard);
// Incluir texto nuevo
$newCard.querySelector("figcaption").insertAdjacentText("beforeend", "Hola");
// Incluir un elemento nuevo
$cards.insertAdjacentElement("afterbegin", $newCard);
</script>
</body>
</html>

Se puede seguir utilizando sin problema el viejo estilo, o bien elegir utilizar este nuevo estilo.

Adicionalmente a estos métodos, jQuery tenía unos métodos denominados:

  • before: hermano primero
  • after: hermano último
  • prepend: hijo primero
  • append: hijo último

que hacen lo mismo que las posiciones beforebegin, afterbegin, beforeend y afterend. Desde hace un tiempo, Javascript estos métodos los tiene activos

Resumen

En resumen, como podemos ver, tenemos un abanico de opciones que tenemos para insertar elementos al DOM.

  • De manera tradicional
    • textContent
    • innerHTML
    • insertBefore
    • appendChild
    • removeChild
    • replaceChild
    • cloneNode
  • Con las nuevas maneras
    • insertAdjacentText
    • insertAdjacentHTML
    • insertAdjacentElement
    • prepend
    • append
    • before
    • after
  • Posiciones de los nuevos métodos
    • beforebegin
    • afterbegin
    • beforeend
    • afterend
Scroll al inicio