append vs appendChild

Most of us face issues while understanding the concept of append and appendChild. Some of us also think that append adds the element to the adjacent while appendChild adds the element to the child. First of all, I would like to burst this myth. Both append as well as appendChild, adds the elements as a child only.

Then, what's the difference between them Or is there any difference between them?

Yes, there are a few differences. Let us take a look over them one by one:

-> append method takes Node Objects as well as DOM Strings as input while appendChild supports Node Objects only.

<body>
    <div id="container">
        <div>
            <h1>Fruits list:</h1><!--Let's create a create a list for fruits list-->
        </div>
    </div>
    <script>
        let con = document.getElementById("container"); //Accessing the container to append the list.
        let list = document.createElement("ul") //Creating the list
        list.innerHTML = `
            <li>
                <p>Apple</p>
            </li>
            <li>
                <p>Banana</p>
            </li>
            <li>
                <p>Litchi</p>
            </li>`
        con.append(list) //Using append method works fine
    </script>
</body>

Using the append method

<body>
    <div id="container">
        <div>
            <h1>Fruits list:</h1><!--Let's create a create a list for fruits list-->
        </div>
    </div>
    <script>
        let con = document.getElementById("container"); //Accessing the container to append the list.
        let list = document.createElement("ul") //Creating the list
        list.innerHTML = `
            <li>
                <p>Apple</p>
            </li>
            <li>
                <p>Banana</p>
            </li>
            <li>
                <p>Litchi</p>
            </li>`
        con.appendChild(list) //Using appendChild method works fine
    </script>
</body>

Using the appendChild method

If we run both the codes, they are gonna give us the same output.

Output of appendChild and append for Node Object

But as soon as we try to add some string using both methods, append works fine but appendChild shows an error in the console.

<body>
    <div id="container">
        <div>
            <h1>Fruits list:</h1><!--Let's create a create a list for fruits list-->
        </div>
    </div>
    <script>
        let con = document.getElementById("container"); //Accessing the container to append the name.
        con.append("Apple") //Works fine
    </script>
</body>

append method gives the following output:

Output of append for DOM String

<body>
    <div id="container">
        <div>
            <h1>Fruits list:</h1><!--Let's create a create a list for fruits list-->
        </div>
    </div>
    <script>
        let con = document.getElementById("container"); //Accessing the container to append the name.
        con.appendChild("Apple") //Throws error
    </script>
</body>

appendChild method gives the following output:

Output of appendChild for DOM String

Along with that, it gives an error in the console.

Error message

-> append method can take more than one argument while appendChild supports only one.

let p = document.createElement("p");
p.innerHTML = "Cat"
con.append(list, p) //Using append method works fine

append shows the following result:

append result for multiple arguments

let p = document.createElement("p");
p.innerHTML = "Cat"
con.appendChild(list, p) //Using appendChild method appends the first element and ignores the rest.

appendChild gives the following result:

appendChild result for multiple arguments

-> appendChild gives a return value but append doesn't.

console.log(con.append(list))

append gives us the result as undefined.

append result on logging

console.log(con.appendChild(list))

appendChild gives us result as DOM element.

appendChild result on logging

In modern development, "append" is more often used due to its flexibility and its ability to append multiple elements at once. Although, "appendChild" is still useful when we are targeting to old browsers primarily.

innerText vs innerHTML vs innerText