JavaScript API allows developers to add (append) an element to the DOM in several different ways. I’ll explain each one of them in detail.

Once you’ve selected, cloned, or created a new element, you have several options to add it to the DOM:

1. append
2. prepend
3. appendChild
4. after
5. before
6. insertBefore
7. insertAdjacentElement

Each of these methods allows you to perform a specific action depending on your needs.

Initial HTML markup as an example:

<div class="hero-section">
  <h1 class="hero-heading">Hello World! 👋</h1>
</div>

1. append() method

The ParentNode.append() method appends a set of Node or DOMString objects after the last child of the ParentNode. This means that you can append not only HTML elements but also text.

For this example, we’ll create a new paragraph element and use the append() method to add it as a last child to the .hero-section element.

const section = document.querySelector('.hero-section')
const newParagraph = document.createElement('p')
newParagraph.textContent = 'Nice to meet you.'

section.append(newParagraph)

Result:

<div class="hero-section">
  <h1 class="hero-heading">Hello World! 👋</h1>
  <p>Nice to meet you.</p>
</div>

To append multiple Nodes append() method accepts a set of Node objects as an argument, use spread syntax to pass arguments:

ParentNode.append(...nodesOrDOMStrings)

Browser support: The append() method is supported in all browsers except Internet Explorer (polyfill is available).

2. prepend() method

The ParentNode.prepend() method does essentially the same thing as append(), but instead, it inserts a set of Nodes before the first child the ParentNode.

const section = document.querySelector('.hero-section')
const newParagraph = document.createElement('p')
newParagraph.textContent = 'Nice to meet you.'

section.prepend(newParagraph)

Result:

<div class="hero-section">
  <p>Nice to meet you.</p>
  <h1 class="hero-heading">Hello World! 👋</h1>
</div>

Just like append(), the prepend() method accepts a set of Node as an argument, with a spread syntax to pass arguments:

ParentNode.prepend(...nodesOrDOMStrings)

Browser support: The prepend() method is supported in all browsers except Internet Explorer (polyfill is available).

3. appendChild() method

As the method name states Node.appendChild() adds an element to the end of the node list of a parent element.

Unlike append() method appendChild() accepts only Node objects, so you’re not able to add strings, also you cannot pass more than one node as an argument.

const section = document.querySelector('.hero-section')
const newParagraph = document.createElement('p')
newParagraph.textContent = 'Nice to meet you.'

section.appendChild(newParagraph)

Result:

<div class="hero-section">
  <h1 class="hero-heading">Hello World! 👋</h1>
  <p>Nice to meet you.</p>
</div>

Browser support: The appendChild() method is supported in all browsers.

4. after() method

The ChildNode.after() method inserts a set of Node or DOMString objects after this ChildNode.

const heading = document.querySelector('.hero-heading')
const newParagraph = document.createElement('p')
newParagraph.textContent = 'Nice to meet you.'

heading.after(newParagraph)

Result:

<div class="hero-section">
  <h1 class="hero-heading">Hello World! 👋</h1>
  <p>Nice to meet you.</p>
</div>

To add multiple Node or DOMString objects pass them as an argument, with a spread syntax:

ChildNode.after(...nodesOrDOMStrings)

Browser support: The after() method is supported in all browsers except Internet Explorer (polyfill is available).

5. before() method

The ChildNode.before() method is the opposite of the above method. It inserts a set of Node or DOMString objects before this ChildNode.

const heading = document.querySelector('.hero-heading')
const newParagraph = document.createElement('p')
newParagraph.textContent = 'Nice to meet you.'

heading.before(newParagraph)

Result:

<div class="hero-section">
  <p>Nice to meet you.</p>
  <h1 class="hero-heading">Hello World! 👋</h1>
</div>

To add multiple Node or DOMString objects pass them as an argument, with a spread syntax:

ChildNode.before(...nodesOrDOMStrings)

Browser support: The before() method is supported in all browsers except Internet Explorer (polyfill is available).

6. insertBefore() method

The Node.insertBefore() method inserts a node before a reference node as a child of a specified parent node.

This method accepts two arguments a new Node and a reference Node.

const section = document.querySelector('.hero-section')
const heading = document.querySelector('.hero-heading')
const newParagraph = document.createElement('p')
newParagraph.textContent = 'Nice to meet you.'

section.insertBefore(heading, newParagraph)

Result:

<div class="hero-section">
  <p>Nice to meet you.</p>
  <h1 class="hero-heading">Hello World! 👋</h1>
</div>

Browser support: The insertBefore() method is supported in all browsers.

7. insertAdjacentElement() method

The Element.insertAdjacentElement() method inserts a given element node at a given position relative to the element it is invoked upon.

This method accepts two arguments position and the inserted element. Possible positions are:

• 'beforebegin': Before the targetElement itself.
• 'afterbegin': Just inside the targetElement, before its first child.
• 'beforeend': Just inside the targetElement, after its last child.
• 'afterend': After the targetElement itself.

const section = document.querySelector('.hero-section')
const newParagraph = document.createElement('p')
newParagraph.textContent = 'Nice to meet you.'

section.insertAdjacentElement('afterend', newParagraph)

Result:

<div class="hero-section">
  <h1 class="hero-heading">Hello World! 👋</h1>
</div>
<p>Nice to meet you.</p>

Browser support: The insertAdjacentElement() method is supported in all browsers.