DEV Community

Lakshit
Lakshit

Posted on • Originally published at devscripter.netlify.app

Mastering JavaScript DOM Manipulation: 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 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Using appendChild method

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

Output of appendChild and append for Node Object

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

appendChild method give the following output:

Output of appendChild for DOM String

Along with that it gives error in console.

Error message

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

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

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.
Enter fullscreen mode Exit fullscreen mode

appendChild give the following result:

appendChild result for multiple arguments

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

console.log(con.append(list))
Enter fullscreen mode Exit fullscreen mode

append gives us result as undefined.

append result on logging

console.log(con.appendChild(list))
Enter fullscreen mode Exit fullscreen mode

appendChild gives us result as DOM element.

appendChild result on logging

In modern development, "append" is more oftenly used due to it's flexibility and it's ability to append multiple elements at once. Although, "appendChild" is still useful when we are targetting to old browsers primarily.

Top comments (0)