BLOG

18 abril, 2020
|

Javascript: append,prepend y appendchild

Javascript append prepend y appendchild

Cuando empecé a aprender a manejar el DOM en javascript me encontré con métodos (append, prepend y appendchild) para adjuntar elementos a un elemento padre. Como muchos otros métodos en Javascript puede parecer confuso tener 3 cosas que, a priori hacen lo mismo pero que tienen unas pequeñas diferencias que nos ayudarán a mejorar nuestro código.


.append()

El método .append nos permite adjuntar un objeto nodo o un DOMString después del último elemento hijo del elemento padre. Dicho de otra forma, podremos añadir dentro de un elemento padre (un div, un parrafo,etc) otro nuevo elemento o una cadena de texto.

/*Ejemplo 1: 
En el siguiente ejemplo, 
vamos a declarar un elemento 
padre y un elemento hijo, y
adjuntaremos el hijo al padre */

let padre = document.createElement('div');
let hijo = document.createElement('p');
padre.append(hijo);

// Esto adjuntará el elemento 'hijo' al 
// elemento 'padre'.
// El resultado en nuestro
// documento será: <div> <p> </p> </div>

//Ejemplo 2: 
//Si posteriormente decidimos añadir 
//un segundo hijo este se agregará 
//detrás de cualquier otro elemento dentro del padre

let hijo2 = document.createElement('span');
padre.append(hijo2);

// El resultado en nuestro documento será: <div><p></p><span></span> </div>

Si el elemento padre ya dispone de un elemento hijo, al usar el método .append, el nuevo hijo se añadirá después del elemento hijo original como podemos ver en el segundo ejemplo arriba.

Así mismo, como comentábamos anteriormente también podremos adjuntar un DOMString (Básicamente, una cadena de texto) tal que así:

// Adjuntando un DOMString

let padre = document.createElement('div');
padre.append('Un sencillo texto');

// El resultado en nuestro documento será: <div>Un sencillo texto</div>

.prepend()

El método .prepend(), funciona igual que el método .append() pero en este caso, colocara el nodo o el DOMstring delante de cualquier elemento hijo dentro del elemento padre.

//Como en el código anterior, declararamos un elemento padre
// y un elemento hijo, y adjuntaremos el hijo al padre

let padre = document.createElement('div');
let hijo = document.createElement('p');
padre.append(hijo);
//El resultado será: <div> <p> </p> </div>

//Si ahora decidimos añadir un segundo hijo al elemento padre:
let hijo2 = document.createElement('span');
padre.prepend(hijo2);
//El resultado será: <div><span></span> <p> </p> </div>

.appendChild()

appendchild es parecido al método .append pero en este caso solo admitirá nodos, por lo que NO podremos usar DOMString.

// Si intentamos adjuntar un DOMString con .appendChild():

let padre = document.createElement('div');
padre.appendChild('Un sencillo texto
');
//Nos devolverá el siguiente error:  Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

En resumen: Siempre que adjuntemos Nodos, podremos usar .append, .prepend y .appendchild, mientras que si queremos adjuntar una cadena de texto, solo podremos usar los métodos .append y .prepend.


9 Comments

  1. Responder

    Rangel R. Mendieta

    15 noviembre, 2021

    Gracias, me ayudaste bastante bien, explicaste Excelente!. Un salu2 desde Republica Dominicana Heroe!

    • Responder

      AJ Sevillano

      15 noviembre, 2021

      Muchas gracias por tu comentario Rangel!
      Me alegro mucho de que te haya servido de ayuda,¡ buena suerte!

  2. Responder

    Jmartin Cabani

    8 julio, 2022

    AJ, muchas gracias por su explicación me fue perfecta.
    Saludossss.

  3. Responder

    Fernando

    25 noviembre, 2022

    muy bien explicado gracias

  4. Responder

    fede

    23 enero, 2023

    pero entoces que proposito o ventaja tendria usar appendChild si append hace lo mismo y mas?

    • Responder

      AJ Sevillano

      24 enero, 2023

      Hola Fede,
      La principal ventaja de usar appendChild() en lugar de append() en JavaScript es que appendChild() es más específico en cuanto a qué se está agregando al DOM. appendChild() solo agrega elementos al DOM, mientras que append() también puede agregar texto o cualquier otro tipo de contenido.

      Otro motivo es la forma en que estos dos métodos funcionan, Por ejemplo, si quieres agregar un nodo de texto a un elemento con append():

      let textNode = document.createTextNode("Hello World!");
      let parentElement = document.querySelector("#myDiv");
      parent.Element.append(textNode);

      Pero si quieres agregar un nodo de texto con `appendChild()`, primero debes crear un elemento nuevo y luego agregar el nodo de texto como hijo de ese elemento:

      let textNode = document.createTextNode("Hello World!");
      let newElement = document.createElement("p");
      newElement.appendChild(textNode);
      let parentElement = document.querySelector("#myDiv");
      parentElement.appendChild(newElement);

      En resumen, appendChild() es más seguro y preciso a la hora de agregar elementos al DOM. Dependerá un poco de cuales son tus necesidades.

      Un saludo!


¿Quieres dejarme algún comentario?

Your email address will not be published. Required fields are marked *

Leave a Reply