append vs appendChild
Written byPhuoc Nguyen
Created
25 Aug, 2023
Category
DOM
When it comes to adding new elements to the Document Object Model (DOM) in JavaScript, there are two methods that may seem similar at first glance:
`append` and `appendChild`.However, in the next section, we'll explore the key difference between the two.
#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.js
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:js
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 about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.
While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.
Recent posts ⚡
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.
Phước Nguyễn