Mastering JavaScript DOM Manipulation: append() vs appendChild()
Tags: html, javascript, webdev, beginners
Published: 2023-08-19 16:14:08

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. 

![Output of appendChild and append for Node Object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/auu8mm8zib17zzf3u5mw.png)

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:


![Output of append for DOM String](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/av1upcxudkzwnu679yiu.png)


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


![Output of appendChild for DOM String](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qk41v9cgyfpx012bau04.png)


Along with that it gives error in console.


![Error message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbl95ymmrtlw8d94mv31.png)


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

![append result for multiple arguments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0vfk03pxa3qb02q14bxy.png)


```
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 result for multiple arguments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pz8m8zw7xcxzgclpp8r7.png)


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

```
console.log(con.append(list))
```

> append gives us result as **undefined**.

![append result on logging](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o376ezrmt8j0hp0q6ktc.png)


```
console.log(con.appendChild(list))
```
> appendChild gives us result as **DOM element**.


![appendChild result on logging](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5crh2tpnk2a8pe57qbf5.png)

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.