DOM Methods append() vs appendChild()

#javascript #webdev #html #dom

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:

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.

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.

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.

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!

//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 for hundreds of video tutorials.