Append multiple elements using append()
Tags: javascript, html
Published: 2020-08-17 10:32:01

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...](https://caniuse.com/#feat=dom-manip-convenience)

## Video Tutorial
If you'd prefer this in the form of a video, check out my tutorial on the `append()` method here 👇
{% youtube XMjs2jQ9SXU %}

## Methods called on Parent Nodes
### `append()`
The [append](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append) method allows you to append multiple elements or text nodes to a parent node.
```javascript
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:
```html
<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](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/prepend) method will insert nodes **before** the first child of a parent.

For example, using the result HTML from before:
```html
<div id="someDiv">
    <span>I am a span!</span>
    Hey I will turn into a text node...
</div>
```

And using this code:
```javascript
const myParent = document.getElementById("someDiv");
const myInnerDiv = document.createElement("div");

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

Will give us:
```html
<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](https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/before) to insert nodes before a child node:
```javascript
/* inserts #div1, #div2 and "some more text" before #someDiv */
someDiv.before(div1, div2, "some more text");
```
Same deal for [after](https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/after):
```javascript
/* inserts #div1, #div2 and "some more text" after #someDiv */
someDiv.after(div1, div2, "some more text");
```
### `replaceWith()`
The [replaceWith](https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/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:
```html
<div id="someDiv">
    <a id="about" href="/about">About</a>
</div>
```
Using this code:
```javascript
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:
```html
<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 😁