Как вставить элемент после другого элемента в JavaScript без использования библиотеки?

Решение 2022 года - Element

ИЗМЕНЕНИЕ: Начиная с 2021 года, ChildNode был объединен с Element. Я изменяю этот ответ соответственно.

Новая документация: https://developer.mozilla.org/ru/docs/Web/API/Element

Это на самом деле то же самое, что и ChildNode. Свойства "before", "after" и "remove" теперь являются частью стандартного API элемента.

// Родитель
const el = document.body;
// Новый элемент
const newEl = document.createElement("div");

// Вставка перед элементом
el.before(newEl);

// Вставка после элемента
// Технически это будет неверно, так как 
// я уже вставил newEl перед el.
// newEl изменил свое местоположение и больше не является "висячим" элементом.
// Нельзя вставить один элемент в два разных места одновременно.
el.after(newEl);

// Дополнительная функция, изначально добавленная с ChildNode, 
// это метод .remove(), который удаляет элемент из DOM
el.remove();
newEl.remove();

Решение 2019 года (устаревшее)

Я не рекомендую использовать это решение, но оставлю его здесь ради "исторической справки".

Это безопаснее, чем использовать полифилл или переопределение прототипов, это просто базовая функция. Да, оно не очень красиво, но работает.

// Родитель
const el = document.body;
// Новый элемент
const newEl = document.createElement("div");

// Необходимая вам функция
function insertAfter(el0, el1) {
    el0.parentNode.insertBefore(el1, el0.nextSibling);
}

// Вставка перед элементом
el.insertBefore(newEl);

// Вставка после элемента
insertAfter(el, newEl);

// Просто помните, что вы не можете использовать insertAfter() или .insertBefore()
// на newEl больше одного раза.
// Нельзя вставить один элемент в два разных места одновременно.

Оригинальное решение (плохая практика)

Я не рекомендую использовать это решение, это то, что я изначально использовал при публикации этого ответа. Я оставлю его здесь ради "исторической справки".

Это всего лишь полифилл для функции .insertAfter, которая не существует. Этот прототип напрямую добавляет функцию HTMLElement.insertAfter(element); к прототипу HTMLElement:

// Родитель
const el = document.body;
// Новый элемент
const newEl = document.createElement("div");

// Пользовательский метод
Element.prototype.insertAfter = function(new) {
    this.parentNode.insertBefore(new, this.nextSibling);
}

// Вставка перед элементом
el.insertBefore(newEl);

// Вставка после элемента
el.insertAfter(newEl);

// Просто помните, что вы не можете использовать .insertAfter() или .insertBefore() 
// на newEl больше одного раза.
// Нельзя вставить один элемент в два разных места одновременно.

Вопрос о использовании insertAdjacentHTML с outerHTML:

elementBefore.insertAdjacentHTML('afterEnd', elementAfter.outerHTML)

Плюсы:

• Уменьшение дублирования кода: Не нужно сохранять элемент before в переменной и использовать его дважды. Если вы переименуете переменную, вам придется изменить только одно вхождение.
• Короче и нагляднее: Это выражение более краткое по сравнению с использованием insertBefore (в случае, если имя переменной с существующим узлом состоит из 3 символов, разница будет заметной).

Минусы:

• Сниженная поддержка браузерами: Эта функция была добавлена позже, чем аналогичные, поэтому у нее ниже уровень поддержки. Дополнительную информацию можно найти здесь: https://caniuse.com/#feat=insert-adjacent
• Потеря свойств элемента: Так как outerHTML преобразует элемент в строку, все свойства, такие как обработчики событий, будут потеряны. Мы используем это, потому что insertAdjacentHTML добавляет контент в виде строк, а не самих элементов.

Вы можете сделать это следующим образом:

referenceNode.parentNode.insertBefore(newNode, referenceNode);
referenceNode.parentNode.insertBefore(referenceNode, newNode);

Этот код переместит newNode перед referenceNode, а затем вернёт referenceNode обратно, вставляя его после newNode, effectively меняя их порядок в DOM. Это может быть полезно, если вы хотите изменить порядок элементов без необходимости их полного удаления из документа.

Самый простой способ добавления элемента после другого в чистом JavaScript:

var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

Метод insertAdjacentHTML позволяет вставить HTML-код в указанную позицию относительно уже существующего элемента. В данном примере мы используем 'afterend', чтобы добавить новый элемент сразу после элемента с id "one".

Ссылка на документацию: MDN Web Docs: Element.insertAdjacentHTML

Шаг 1. Подготовка элементов:

var element = document.getElementById('ElementToAppendAfter'); // Получаем элемент, после которого будем добавлять новый
var newElement = document.createElement('div'); // Создаем новый элемент div
var elementParent = element.parentNode; // Получаем родительский элемент

Шаг 2. Вставка после:

elementParent.insertBefore(newElement, element.nextSibling); // Вставляем новый элемент после указанного

Таким образом, в первом шаге мы подготовли нужные элементы, а во втором - осуществили вставку нового элемента после указанного.