Goal

The goal of this tutorial is to know the difference between append and appendChild

Info

Ok. The main difference is that appendChild is a DOM function meanwhile append is a JavaScript function.

Then, why I prefer append?

Imagine that you want to put something inside a div from your HTML. Like a simple String.

You CAN made this:

document.getElementById("yourId").append("Hello");

But what happens if you try to make the same with appendChild?

document.getElementById("yourId").appendChild("Hello");

Your console show this error:

“Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.”

Why?

The appendChild function needs an “element” like a parameter.

You CAN’T make this:

document.getElementById("yourId").appendChild("<p></p>");

But you CAN make this.

var p = document.createElement("p");

document.getElementById("yourId").appendChild(p);

Conclusion

In all cases where you can use appendChild, you can use append. But not in reverse.