Append multiple elements using append()

In this article we're going to take a look at a couple of relatively new methods in JavaScript to easily add new nodes (or elements) to the DOM.

First, let's look at compatibility

These methods are supported in many major browsers, but please consider compatibility before using them in production:
DOM manipulation convenience methods on Can I use...

Video Tutorial

If you'd prefer this in the form of a video, check out my tutorial on the append() method here 👇

Methods called on Parent Nodes

append()

The append method allows you to append multiple elements or text nodes to a parent node.

const myParent = document.getElementById("someDiv");
const mySpan = document.createElement("span");

mySpan.textContent = "I am a span!";
myParent.append(mySpan, "Hey I will turn into a text node...");

And the result:

<div id="someDiv">
    <span>I am a span!</span>
    Hey I will turn into a text node...
</div>

As you can see, you can supply an unlimited amount of arguments to the append() method and it will append everything to the parent.

Along with this, any strings you pass through will be automatically converted to text nodes for your convenience 😁

The rest of the methods in this article work in a similar way. Let's take a look at a few more.

prepend()

The prepend method will insert nodes before the first child of a parent.

For example, using the result HTML from before:

<div id="someDiv">
    <span>I am a span!</span>
    Hey I will turn into a text node...
</div>

And using this code:

const myParent = document.getElementById("someDiv");
const myInnerDiv = document.createElement("div");

myInnerDiv.id = "myInnerDiv";
myParent.prepend(myInnerDiv, "Hey another text node");

Will give us:

<div id="someDiv">
    <div id="innerDiv"></div>
    Hey another text node
    <span>I am a span!</span>
    Hey I will turn into a text node...
</div>

Methods called on Child Nodes

Similar to the two methods above, we have a few more methods available that achieve similar goals on child nodes.

before() and after()

These work in the exact same way, but are called directly on child nodes.

Use before to insert nodes before a child node:

/* inserts #div1, #div2 and "some more text" before #someDiv */
someDiv.before(div1, div2, "some more text");

Same deal for after:

/* inserts #div1, #div2 and "some more text" after #someDiv */
someDiv.after(div1, div2, "some more text");

replaceWith()

The replaceWith method is a little different to the previous ones - this one lets you replace a child node with another given set of nodes.

Given this HTML:

<div id="someDiv">
    <a id="about" href="/about">About</a>
</div>

Using this code:

const about = document.getElementById("about");
const mySpan = document.createElement("span");

mySpan.textContent = "I am a span";
about.replaceWith(mySpan, "my name is Dom");

Will give us:

<div id="someDiv">
    <span>I am a span</span>
    my name is Dom
</div>

And there you go - those are a few convenient DOM methods for adding/replacing nodes 😁