DOM Methods append() vs appendChild()
Tags: javascript, webdev, html, dom
Published: 2021-03-29 11:28:07

## Back in the Day

Starting back with the earliest versions of the DOM we had the ability to inject new content into our web pages by using the `innerHTML` property or the `parentNode.appendChild()` method.

If you had a `DOMString`, which is a `String` that represents some new HTML content for your page, then it made sense to use `innerHTML`. We could even concatenate our content on to the old version of the HTML like this:

```js
let p = '<p class="recent">This is <em>NEW</em> content.</p>';
let div = document.getElementById('main');
div.innerHTML += p;
```

These were the days when the DOM methods and properties you could use, **really** depended on which Browser you were using. 😬 You frequently had to test for script capabilities and figure out which browser was being used.

There have actually been different versions of the DOM. Version 0, 1, and 2. These disparities led to the rise of libraries like `prototype`, `mootools`, `scriptaculous`, and `jQuery`. 15 years ago you were grateful to have a library 📚 that let you skip all the testing and call one method which would work in all browsers.

## AppendChild Usage

If you were generating content and elements dynamically then developers tended to use `appendChild`. It has been around since those early DOM days.

```js
let p = document.createElement('p');
p.innerHTML = 'This is <em>NEW</em> content.';
let div = document.getElementById('main');
div.appendChild(p);
```

We would even mix and match, creating top level elements with `createElement` and then using `innerHTML` for the text inside the element, just in case it included inline elements like `<span>` or `<b>`.

For nearly 20 years this was what we did in vanilla JS.

## The New Methods Arrive

Between 2016 and 2018 all the standard browsers added support for a number of new DOM methods, including `parentNode.append()`.

On the surface, no big deal. I can now save myself typing the letters `C-h-i-l-d`. Right? 

True. **BUT**. It comes with some cool new capabilities.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p5x211vhskq3pzf8mqt3.gif)

## This is the Way

These new capabilities are what sets `append` apart from `appendChild` and are the reason you should switch today! 🗓️

First, the new `parentNode.append()` method is happy to accept `DOMStrings`, not **just** DOM Elements.

```js
let p = '<p class="recent">This is <em>NEW</em> content.</p>';
let div = document.getElementById('main');
div.append(p);
```

It still accepts DOM Element Objects but it can handle the DOMStrings too.

Second, the new `parentNode.append()` method lets you pass in multiple elements. That means I can add a series of new Elements and/or DOMStrings with one single call to `append` and they will be added in order!

```js
//create a heading Element Node with text
let head = document.createElement('h2');
head.textContent = 'The Section Heading';
//create a paragraph DOMString
let p1 = '<p class="recent">This is <em>NEW</em> content.</p>';
//create a paragraph Element Node with an Img Element Node
let p2 = document.createElement('p');
let img = document.createElement('img');
img.src = 'http://www.example.com/image.jpg';
p2.append(img);

let div = document.getElementById('main');
//put all three into <div id="main">, in order
div.append(head, p1, p2);
```

## What's the Catch

There is always a catch. What does it not do that `appendChild` could?

Only one thing. The older `appendChild` method returned a reference to the node that was appended. The newer `append` method returns undefined.

Is that bad? Not really. As you can see in my example above, much of the time you already have variables that refer to the elements you are appending.

And honestly, in the 20+ years of client-side scripting where I have been using `appendChild`, I have never used the return value from the method.

So, start today. If you were using `appendChild` change the habit and use `append` instead.

If you want to learn more about the DOM, Javascript or practically any web development topic: please check out my [YouTube channel](https://www.youtube.com/c/SteveGriffith-Prof3ssorSt3v3/videos) for hundreds of video tutorials.