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>

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 the codes, they are gonna give us same output.

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 error in console.

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

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

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

Blog

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

Lakshit

Join Our Newsletter. No Spam, Only the good stuff.

Related