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
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
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.
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
For nearly 20 years this was what we did in vanilla JS.
Between 2016 and 2018 all the standard browsers added support for a number of new DOM methods, including
On the surface, no big deal. I can now save myself typing the letters
True. BUT. It comes with some cool new capabilities.
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);
There is always a catch. What does it not do that
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