Mastering JavaScript DOM Manipulation: append() vs appendChild()

3 min readAug 21, 2023

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 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 appendChild method

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

Output for append and appendChild for nodes

But as soon as we try to add some string using both the methods, append works fine but appendChild shows error in 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:



<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 give the following output:

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

Output in the console for *appendChild for strings*

-> 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:

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 a return value but append doesn’t.

console.log(con.append(list))

append gives us result as undefined.

console.log(con.appendChild(list))

appendChild gives us result as DOM element.

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.

Mastering JavaScript DOM Manipulation: append() vs appendChild()

Written by Lakshit Rajput