append vs appendChild

Written byPhuoc Nguyen

#The `appendChild` method

To add a new child node to an existing parent node, use the `appendChild` method. Simply pass the node you want to add as a child as the method's argument.

For instance, let's say you have a `div` element with an `id` of `parent`. To add a new `p` element as a child, you can use the `appendChild` method.

const parent = document.getElementById('parent');
const child = document.createElement('div');
parent.appendChild(child);

In this example, we start by finding the existing `div` element with an `id` of `parent`. Next, we create a new `div` element using the `createElement` method. Finally, we add the new `p` element to the `div` element as a child using the `appendChild` method.

#The `append` method

The `append` method is like `appendChild`, but better. With `append`, you can add multiple nodes all at once.

For example, let's say you want to add a new paragraph `p` element with some text to an existing `div` element. You can do this easily using the `append` method like so:

const parent = document.getElementById('parent');
const child = document.createElement('div');
const otherChild = document.createTextNode('Some text');

parent.append(child, otherChild);

In this example, we start by getting a reference to an existing `div` element that has an `id` of `parent`. Then, we create a new `div` element and a text node using the `createElement` and `createTextNode` methods, respectively. Finally, we add both the new `div` element and the text node as children of the `div` element using the `append` method.

#In Conclusion

In summary, if you want to add a single child node to an existing parent node, you can use the `appendChild` method. But if you want to add multiple nodes at once, the `append` method is your go-to.

Questions? 🙋

Do you have any questions? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.

I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.