Skip to main content Accessibility Feedback

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

Yesterday, we looked at how to create elements with vanilla JavaScript. Today, we’re going to learn how to insert them before other elements in the DOM.

The Old-School Way #

The traditional way of handling this, supported back to at least IE6, is with the insertBefore() method.

The insertBefore() method works great, but is kind of clunky. You need to call it on the parent of the element you’re inserting your new element before (the referenceNode), and pass in both the new element and the reference node as arguments.

// 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);

The ES6 Way #

Fortunately, ES6 brings us a new approach that’s much more like how it works in libraries like jQuery: before().

You call the before() method on the reference node, and pass in the new node as an argument. And that’s it.

// 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.before(newNode);

Browser Compatibility #

At the time of writing, before() works in newer versions of Chrome, Firefox, and Opera, and has no support in Edge and Internet Explorer.

Buta polyfill adds support back to IE9.

// from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/before()/before().md
(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty('before')) {
      return;
    }
    Object.defineProperty(item, 'before', {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function before() {
        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);
      }
    });
  });
})([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