Skip to main content Accessibility Feedback

How to insert an element after another one in the DOM with vanilla JavaScript

This week, we looked at how to create an element and inject it before another one with vanilla JavaScript.

Today, let’s look at two ways to insert an element after another one.

Oddly, using insertBefore()

Yesterday, we learned about the insertBefore() method. You can use it to insert an element after a node by using nextSibling to get the node that comes right after the one you want to target.

// Create a new element
var newNode = document.createElement('div');

// Get the reference node
var referenceNode = document.querySelector('#some-element');

// Insert the new node before the reference node
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

A bit awkward and clunky, but it works—back to at least IE 6, in fact.

The Modern Approach #

The modern approach is to use the after() method. Call it on the element you want to add your new element after, and pass in your new element.

// Create a new element
var newNode = document.createElement('div');

// Get the reference node
var referenceNode = document.querySelector('#some-element');

// Insert the new node before the reference node
referenceNode.after(newNode);

Browser Compatibility #

Like the before() method that we looked at yesterday, at the moment after() works in newer versions of Chrome, Firefox, and Opera, and has no support in Edge and Internet Explorer.

Here’s a polyfill that pushes support back to IE 9.

//from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/after()/after().md
(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty('after')) {
      return;
    }
    Object.defineProperty(item, 'after', {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function after() {
        var argArr = Array.prototype.slice.call(arguments),
          docFrag = document.createDocumentFragment();

        argArr.forEach(function (argItem) {
          var isNode = argItem instanceof Node;
          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
        });

        this.parentNode.insertBefore(docFrag, this.nextSibling);
      }
    });
  });
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);

🔥 Hot off the press! I just launched a new pocket guide. Learn how to build interactive web apps with vanilla JavaScript.

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips