How to insert an element after another element in JavaScript without using a library?

Ensuring cross-browser compatibility

The DOM - it giveth, and it taketh away. And sometimes it doesn’t giveth if you are on IE9. But fear not, coding warrior, for the insertBefore() method treats all browsers as equals. It has got your back for IE 9+ and all modern browsers.

Crafting reusable functions

As a developer, DRY (Don't Repeat Yourself) should be your mantra. Store your potions for DOM manipulation in reusable functions.

// Your magic stick 🪄
function insertAfter(newNode, referenceNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}


This magic stick lets you insert any element next to any targeted node. No more abracadabras.

Understanding update and deletion methods

In the realm of DOM, inserting an element is half the battle. Mastering update and delete methods like element.after(), element.before(), element.remove(), or element.replaceWith() tips the balance in your favor ensuring Tolkien level control over your DOMicile.

Accounting for edge cases

The last child. Sounds like a movie, but it's a case you have to be prepared for. You may find yourself wanting to insert an element after the last child. In this scene, elementTarget.nextSibling will arrive as null, and insertBefore() will end up appending the element at the end of the parent node's child list. Talk about a plot twist!

If HTML string content is your protagonist, element.insertAdjacentHTML('afterend', '<div>New Element</div>') is your choice of weapon while for element nodes, insertAdjacentElement is the Excalibur you seek.

Beware the .outerHTML though, it might betray you by replacing the whole element and detach our loyal friends, the event handlers.

Extending functionality via Prototypes

to For the artist in you, enrich your prototypes with methods like .appendAfter().

Element.prototype.appendAfter = function(element) {
  element.parentNode.insertBefore(this, element.nextSibling);
};

// Example usage, easy peasy lemon squeezy:
newElement.appendAfter(elementTarget);


Do remember, extending native prototypes should be as rare as unicorns, to avoid conflicts with other libraries or ECMAScript standards.

Resorting to alternative methods

In the fierce battle of browser compatibility, insertAdjacentElement() is a mighty ally when .after() fails you:

// When all else fails, insertAdjacentElement prevails 💪
elementTarget.insertAdjacentElement('afterend', newElement);


Stirs and sips of practical examples and tutorials

To truly master the art of DOM-manipulation, drink deeply from precious knowledge wells like JSFiddle or CodePen demonstrating practical examples. Don't forget, tutorials on DigitalOcean or SitePoint also make scrumptious brain food.

Avoiding common pitfalls

Wield the power to manipulate the DOM wisely. Remember that large-scale changes can lead to performance bottlenecks. Embrace concepts like DocumentFragment to minimise reflows and repaints, thus boosting efficiency.

Thinking of mirroring an element in two places in the DOM? Think again, as it's physically impossible. When faced with such sorcery, make a clone (element.cloneNode(true)).