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.