Append vs AppendChild en Javascript ¿ Cuál utilizar ?

No comprendo por que usas append y no appendChild.

Hace poco recibí este comentario en uno de mis videos de YouTube en donde muestro como ir paso a paso creando la lógica de un E-commerce con JavaScript.

Aquí el video para quien le interese:

En verdad esto me motivo a escribir este articulo para explicar la diferencia entre ambos y comentar cual es conveniente utilizar.

¿Qué son append y appendChild?

Append y appendChild en JavaScript son metodos para manipular el DOM (es decir: el Document Objet Model). Ambos tienen la facultad de agregar elementos al DOM pero tienen enfoques ligeramente diferentes.

El método appendChid

Su tarea principal es agregar un único nodo como hijo al final de otro nodo existente.

Para utilizarlo, primero hay que seleccionar el nodo al que deseas agregar un hijo y luego llamar a appendChild.

Un ejemplo con appendChild()

const parent = document.getElementById("parentElement"); const child = document.createElement("div"); parent.appendChild(child);

Este código va a agregar elemento child al final del elemento parent.

En resumen, appendChild sirve para agregar un solo nodo como hijo al final de otro nodo.

El método append()

Con append, se puede agregar uno o varios nodos al final de un elemento específico, se van a ir agregando en el orden en que en se proporcionan.

Un ejemplo con append()

const parent = document.getElementById("parentElement"); const child1 = document.createElement("div"); const child2 = document.createElement("span"); parent.append(child1, child2);

Este código agrega el elemento child1 seguido por el elemento child2 al final del elemento parent.

Entonces, append es más versátil y permite agregar múltiples nodos en una sola llamada, lo que puede simplificar la manipulación del DOM.

Diferencias entre append y appendChild

Comencemos con la primer diferencia importante

1) appendChild() agrega un solo nodo / append(), agrega uno o varios nodos.

Ademas con append() se pueden agregar strings. Esto no es posible con appendChild() ya que este solo acepta nodos

Ejemplo:

const parent = document.getElementById("parentElement"); parent.append("soy un texto");

En este caso va a funcionar ya que append() acepta el agregar texto.

Seguimos:

const parent = document.getElementById("parentElement"); parent.appendChild("soy un texto");

En este no va a funcionar como se espera, porque el método appendChild() solo acepta agregar un nodo y no permite agregar texto

Entonces segunda diferencia importante:

2) appendChild() no permite agregar texto, / append() si permite agregar texto.

Conclusión:

appendChild() agrega un solo nodo y no permite agregar texto.

append() agrega uno o varios nodos y si permite agregar texto.

¿Cuál utilizar?

En mi caso prefiero utilizar append() porque es mas moderno y es una opción más versátil, ya que te permite agregar múltiples nodos en una sola llamada y acepta también pasarle texto.

Pero si estas buscando agregar un solo nodo appendChild() es suficiente.

En mi caso, me acostumbre a utilizar siempre directamente append().

Bueno, espero que esto te haya servido y que la pasen bien!

Saludos,

Pablo.