Manejo del DOM #5: modificando elementos.

Desde JavaScript podemos modificar elementos, reemplazando elementos por otros, insertar elementos en diferentes posiciones del DOM por medio del traversing.

Veremos como hacerlo de la forma antigua y con los nuevos métodos y mejoras que ECMAScript ha implementado con el pasar de los años.

Para ambas formas usaremos como ejemplo la siguiente estructura HTML:

<section class="cards">
    <figure class="card">
        <img src="https://picsum.photos/id/237/200/200" alt="card">
        <figcaption>Card</figcaption>
    </figure>

    <figure class="card">
        <img src="https://picsum.photos/id/23/200/200" alt="card">
        <figcaption>Card</figcaption>
    </figure>

    <figure class="card">
        <img src="https://picsum.photos/id/137/200/200" alt="card">
        <figcaption>Card</figcaption>
    </figure>

    <figure class="card">
        <img src="https://picsum.photos/id/267/200/200" alt="card">
        <figcaption>Card</figcaption>
    </figure>

    <figure class="card">
        <img src="https://picsum.photos/id/27/200/200" alt="card">
        <figcaption>Card</figcaption>
    </figure>

    <figure class="card">
        <img src="https://picsum.photos/id/239/200/200" alt="card">
        <figcaption>Card</figcaption>
    </figure>
</section>

Forma antigua de modificar elementos

En un archivo JavaScript accederemos al contenedor donde se encuentran cada una de las figure:

const $cards = document.querySelector(".cards")

Crearemos un elemento figure y le asignaremos un nombre de referencia:

const $newCard = document.createElement("figure")

De manera rápida crearemos el contenido del elemento figure que acabamos de crear:

$newCard.innerHTML = `
    <img src="https://picsum.photos/id/111/200/200" alt="any">
    <figcaption>Any</figcaption>
`

Por ultimo solo agregamos la clase CSS:

$newCard.classList.add("card")

Ahora que tenemos el elemento creado empezaremos a ver como podemos modificar e insertar el elemento al DOM.

.replaceChild()

Este método reemplaza el elemento por uno nuevo, este recibe dos parámetros, el primero, el elemento que se insertará al DOM, el segundo, el elemento del cual se va a reemplazar por el nuevo.

$cards.replaceChild($newCard, $cards.children[1])

A través del "traversing" podemos buscar el elemento hijo que va a ser reemplazado.

.insertBefore()

Este método inserta el elemento antes de un elemento de referencia, este recibe dos parámetros, el primero, el elemento que se insertará al DOM, el segundo, la posición del elemento que tomará como referencia para insertarlo antes de él.

$cards.insertBefore($newCard, $cards.firstElementChild)

En este ejemplo lo estamos insertando al principio de todas las figure, aunque podemos insertarlo antes de cualquier elemento existente.

.removeChild()

Este método nos permite remover un elemento del DOM, si queremos eliminar un elemento del DOM lo podríamos hacer con este método, este recibe un parámetro el cual es el elemento a remover.

$cards.removeChild($cards.lastElementChild)

En este ejemplo estamos removiendo el ultimo elemento.

Forma reciente de modificar elementos

Con las nuevas actualizaciones de ECMAScript se han implementado nuevos métodos para poder modificar elementos, a continuación cada uno de los métodos que se pueden utilizar:

• .insertAdjacentElement(position, element)

Este método nos permite insertar adyacentemente un elemento al DOM.

• .insertAdjacentHTML(position, html)

Este método nos permite insertar adyacentemente código HTML, es equivalente a .innerHTML.

• .insertAdjacentText(position, text)

Este método nos permite insertar texto adyacentemente, es equivalente a .textContent.

Cada uno de estos métodos reciben dos parámetros, el primero es la posición en la que se insertarán en el DOM, el segundo, puede ser una variable con codigo HTML en el caso de .insertAdjacentHTML(), puede ser texto en el caso de .insertAdjacentText(), o puede ser el elemento que se insertará en el caso de .insertAdjacentElement.

Como primer parámetro recibe la posición en la que se insertará el elemento, código o texto hacia al DOM, para eso existen de forma establecida por JavaScript lo siguiente:

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

Veamos un ejemplo para poder comprender mejor:

Accederemos al contenedor de cada una de las figure:

const $cards = document.querySelector(".cards")

Crearemos un elemento figure con un nombre de referencia:

const $newCard = document.createElement("figure")

Ahora empezaremos a implementar cada uno de los método y posiciones, primero, en una variable definiremos código HTML que será el contenido del elemento figure que acabamos de crear:

let contentHTML = `
    <img src="https://picsum.photos/id/111/200/200" alt="any">
    <figcaption></figcaption>
`

.insertAdjacentHTML()

A continuación, insertaremos este código al elemento figure:

$newCard.insertAdjacentHTML("afterbegin", contentHTML)

Como primer parámetro utilizamos afterbegin para definirlo como "primer hijo", y el segundo parámetro es el código HTML que se insertará.

Una vez teniendo la estructura del elemento figure, insertaremos texto a la etiqueta figcaption ya que la hemos dejado vacía:

.insertAdjacentText()

Insertaremos el texto de la siguiente manera:

$newCard.querySelector("figcaption").insertAdjacentText("afterbegin", "Any")

Con el método .querySelector() accedemos a la etiqueta figcaption para poder definir el texto con el metodo .insertAdjacentText(), como primer parametro elegimos la posición "afterbegin" (primer hijo), y como segundo parámetro definimos el texto a insertar.

Ahora que ya tenemos formado nuestro elemento figure insertaremos el elemento al DOM:

.insertAdjacentElement()

$cards.insertAdjacentElement("afterbegin", $newCard)

Utilizamos "afterbegin" para insertarlo al inicio, pero fácilmente podemos insertarlo en "x" posición o como hermano anterior o hermano siguiente del contenedor.

Con esto ya tenemos insertado el elemento figure en el DOM. Ambas formas funcionan, nos permiten tener opciones de como modificar e insertar elementos al DOM.