Вставка элемента после другого в JavaScript: решение без библиотек

Быстрый ответ

Если перед вами стоит задача размещения нового элемента сразу за существующим в DOM-структуре, рекомендуется использовать следующий способ:

// Быстрая вставка элемента в JavaScript 🚀
elementTarget.parentNode.insertBefore(newElement, elementTarget.nextSibling);

С помощью этой команды newElement будет добавлен непосредственно после elementTarget в DOM, словно ниндзя, который стремительно занимает место рядом с целью.

Обеспечение кроссбраузерности

Интеракция с DOM – это игра: здесь и приходятся, и получаются. Однако, метод insertBefore() работает стабильно во всех браузерах. Он надёжен начиная с IE 9 и во всех современных браузерах.

Создание полезных функций многократного использования

Принцип DRY (Don't Repeat Yourself — Не повторяйте себя) рекомендует использовать полезные функции, которые помогают без повторений выполнять схожие действия в DOM:

// Многоразовый метод 🪄
function insertAfter(newNode, referenceNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

Данный метод позволяет без лишних усилий добавить любой новый элемент за любым указанным узлом, избегая повторения кода.

Особенности методов обновления и удаления

Чтобы овладеть искусством управления DOM, необходимо изучить методы обновления и удаления, такие как element.after(), element.before(), element.remove() или element.replaceWith(). Владея ими, вы получите полный контроль над изменениями в DOM на профессиональном уровне.

Учёт особенных случаев

Будьте готовы к ситуации, когда требуется вставить элемент после последнего потомка, где elementTarget.nextSibling будет равным null. В таком случае функция insertBefore() добавит новый элемент в конец списка потомков указанного узла. Для HTML-строк лучшим выбором будет метод element.insertAdjacentHTML('afterend', '<div>New Element</div>'), а для элементов — узлов — insertAdjacentElement.

Воздержитесь от использования .outerHTML, поскольку он может полностью заменить целевой элемент, при этом удалить все обработчики событий.

Расширение функциональности с помощью прототипов

Вы можете улучшить прототипы, добавив свои методы, например, .appendAfter():

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

// Пример использования — просто и легко:
newElement.appendAfter(elementTarget);

Важно помнить, что расширение стандартных прототипов должно быть осуществлено аккуратно, чтобы избежать конфликтов с библиотеками или будущими стандартами ECMAScript.

Визуализация

🛤️Поезд: [Локомотив, 🚃Вагон1, 🚃Вагон2]
🛤️Присоединяем новый вагон: [🚃НовыйВагон]

Применяем технику вставки:

// Вагон движется! 🚂🚃🚃💨
Вагон1.after(НовыйВагон);

И результат не заставит себя ждать:

🛤️Обновленный поезд: [Локомотив, 🚃Вагон1, 🚃НовыйВагон, 🚃Вагон2]

Вагон был быстро и незаметно добавлен!

Обращение к альтернативным методам

Если в борьбе за кроссбраузерность метод .after() оказывается недоступен, можно использовать insertAdjacentElement():

// Когда всё остальное не работает, insertAdjacentElement приходит на помощь 💪
elementTarget.insertAdjacentElement('afterend', newElement);

Исследование и практика на примерах и пособиях

Чтобы глубже освоить взаимодействие с DOM, обратитесь к учебным материалам и практическим примерам на ресурсах, таких как JSFiddle или CodePen. Отличным источникам знаний служат также DigitalOcean и SitePoint.

Профилактика распространенных ошибок

Рационально используйте возможности DOM. Массовые изменения могут вызвать проблемы с производительностью. Чтобы избегать этого, управляйте DOM с помощью таких инструментов как DocumentFragment, что сократит количество перерисовок и перерасчет макета, улучшив тем самым эффективность вашего кода.

Если вам нужно отобразить элемент в двух местах DOM одновременно, помните, что это невозможно сделать напрямую. В таких случаях используйте клонирование узла (element.cloneNode(true)).

Полезные материалы

1. Метод Element: after() – Web API | MDN — документация MDN о методе .after() в JavaScript.
2. dom – Как вставить элемент после другого элемента в JavaScript? — Обсуждение на Stack Overflow с практическими решениями.
3. Изменение документа – JavaScript.info — руководство по изменению документа, включая вставку элементов.
4. Манипуляция DOM без jQuery — SitePoint — введение в техники работы с DOM.
5. Как работать с элементами DOM | DigitalOcean — учебник по основам взаимодействия с элементами DOM.
6. JavaScript insertAdjacentHTML – David Walsh — обзор функции insertAdjacentHTML и её практических примеров для добавления элементов.