JavaScript: Вставка элемента после другого - Полное руководство

JavaScript предоставляет несколько способов вставить элемент после другого элемента без использования библиотек. Современный подход использует метод Element.after(), в то время как традиционный обходной путь включает использование insertBefore() с nextSibling в качестве узла ссылки. Вы также можете создать собственную функцию insertAfter() для лучшей читаемости кода и совместимости с браузерами.

Содержание

• Использование современного метода Element.after()
• Использование insertBefore() с nextSibling
• Создание пользовательской функции insertAfter()
• Использование insertAdjacentHTML()
• Рассмотрения совместимости с браузерами
• Практические примеры

Использование современного метода Element.after()

Метод Element.after() является стандартным, современным способом вставки элементов после другого элемента в JavaScript. Как объясняется в Mozilla Developer Network, этот метод “вставляет набор объектов Node или строк в список дочерних элементов родительского элемента, сразу после элемента.”

// Создаем новый элемент
const newElement = document.createElement('div');
newElement.textContent = 'Я вставлен после';

// Элемент-ссылка, после которого происходит вставка
const referenceElement = document.getElementById('myElement');

// Вставляем новый элемент после элемента-ссылки
referenceElement.after(newElement);

Этот метод чистый, читаемый и соответствует современным стандартам JavaScript. Он также может вставлять несколько элементов одновременно:

referenceElement.after(element1, element2, 'Текстовый узел', element3);

Использование insertBefore() с nextSibling

До того как метод after() получил широкую поддержку, разработчики использовали умный обходной путь с существующим методом insertBefore(). Согласно Plain JavaScript, этот подход поддерживается всеми основными браузерами, включая IE 8 и ниже.

function insertAfter(newElement, referenceElement) {
    referenceElement.parentNode.insertBefore(newElement, referenceElement.nextSibling);
}

// Использование
const newElement = document.createElement('div');
newElement.textContent = 'Вставлен после с использованием insertBefore';

const referenceElement = document.getElementById('myElement');

insertAfter(newElement, referenceElement);

Это работает потому, что insertBefore() вставляет новый элемент перед указанным узлом-ссылкой. Используя referenceElement.nextSibling в качестве узла-ссылки, мы эффективно вставляем новый элемент после элемента-ссылки.

Создание пользовательской функции insertAfter()

Для лучшей читаемости и поддерживаемости кода вы можете создать собственную функцию insertAfter(). Многие разработчики поделились своими реализациями на платформах вроде Stack Overflow.

Вот надежная реализация с обработкой ошибок:

function insertAfter(newElement, referenceElement) {
    if (!referenceElement.parentNode) {
        throw new Error('У элемента-ссылки нет родительского узла');
    }
    
    if (!referenceElement.nextSibling) {
        // Если элемент-ссылка последний дочерний, добавляем к родителю
        referenceElement.parentNode.appendChild(newElement);
    } else {
        referenceElement.parentNode.insertBefore(newElement, referenceElement.nextSibling);
    }
}

// Использование
const newElement = document.createElement('div');
newElement.textContent = 'Пользовательская insertAfter работает!';

const referenceElement = document.getElementById('myElement');

insertAfter(newElement, referenceElement);

Вы также можете расширить прототип Node для синтаксиса, похожего на jQuery (хотя расширение прототипа следует использовать осторожно):

// Добавляем к прототипу Node (используйте с осторожностью в продакшене)
if (!Node.prototype.insertAfter) {
    Node.prototype.insertAfter = function(newNode, referenceNode) {
        if (!referenceNode) {
            this.appendChild(newNode);
        } else {
            this.insertBefore(newNode, referenceNode.nextSibling);
        }
    };
}

// Использование
const parent = document.getElementById('parent');
const newElement = document.createElement('div');
parent.insertAfter(newElement, referenceElement);

Использование insertAdjacentHTML()

Метод insertAdjacentHTML() предоставляет еще один гибкий подход. Как описано в документации MDN, этот метод “анализирует указанный ввод как HTML или XML и вставляет полученные узлы в DOM-дерево в указанной позиции.”

// Вставляем HTML после элемента
const referenceElement = document.getElementById('myElement');
referenceElement.insertAdjacentHTML('afterend', '<div>Вставленный HTML-контент</div>');

// Вставляем несколько элементов
referenceElement.insertAdjacentHTML('afterend', 
    '<div>Первый элемент</div>' +
    '<div>Второй элемент</div>'
);

Позиция afterend вставляет HTML после элемента. Этот метод особенно полезен, когда вам нужно вставлять HTML-строки, а не DOM-элементы.

Рассмотрения совместимости с браузерами

При выборе метода учитывайте целевые браузеры:

Поддержка Element.after()

• Современные браузеры: Chrome, Firefox, Opera, Edge, Safari (полная поддержка)
• Старые браузеры: Нет поддержки в Internet Explorer и ранних версиях Edge

Как отмечено в Go Make Things, метод after() “работает в новых версиях Chrome, Firefox и Opera, и не поддерживается в Edge и Internet Explorer.”

Поддержка insertBefore() с nextSibling

• Все браузеры: Полная поддержка, включая Internet Explorer 6+ и все современные браузеры

Поддержка insertAdjacentHTML()

• Современные браузеры: Полная поддержка
• Старые браузеры: Поддерживается с Internet Explorer 8+

Варианты полифиллов

Для максимальной совместимости можно использовать полифилл. Вот простой полифилл для метода after():

// Полифилл для Element.after()
if (!Element.prototype.after) {
    Element.prototype.after = function() {
        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);
    };
}

Практические примеры

Пример 1: Вставка элемента списка

// Создаем новый элемент списка
const newListItem = document.createElement('li');
newListItem.textContent = 'Новый элемент';

// Элемент-ссылка в списке
const referenceItem = document.querySelector('#myList li:nth-child(2)');

// Вставляем после элемента-ссылки
referenceItem.after(newListItem);

Пример 2: Вставка нескольких элементов

const container = document.getElementById('container');

// Вставляем несколько элементов после контейнера
container.after(
    document.createElement('h2'),
    document.createElement('p'),
    document.createTextNode('Некоторый текст')
);

Пример 3: Вставка HTML-контента

const button = document.getElementById('myButton');

// Вставляем HTML после кнопки
button.insertAdjacentHTML('afterend', 
    '<div class="notification">Кнопка нажата!</div>'
);

Пример 4: Динамическое добавление поля формы

function addFormField() {
    const form = document.getElementById('myForm');
    const lastField = form.lastElementChild;
    
    const newField = document.createElement('input');
    newField.type = 'text';
    newField.name = 'field' + (form.children.length + 1);
    newField.placeholder = 'Новое поле';
    
    // Вставляем перед кнопкой отправки
    const submitButton = form.querySelector('input[type="submit"]');
    insertAfter(newField, submitButton);
}

// Вспомогательная функция
function insertAfter(newElement, referenceElement) {
    referenceElement.parentNode.insertBefore(newElement, referenceElement.nextSibling);
}

Каждый метод имеет свои преимущества в зависимости от ваших конкретных потребностей. Метод after() наиболее прямолинеен для современных браузеров, в то время как подход с insertBefore() и nextSibling обеспечивает максимальную совместимость. Выберите метод, который лучше всего соответствует требованиям вашего проекта и целевой аудитории.

Источники

1. Element: after() method - Web APIs | MDN
2. How to insert an element after another one in the DOM with vanilla JavaScript | Go Make Things
3. dom - How to insert an element after another element in JavaScript without using a library? - Stack Overflow
4. Insert an element after or before another | Plain JavaScript
5. Element: insertAdjacentHTML() method - Web APIs | MDN

Заключение

Чтобы вставить элемент после другого элемента в JavaScript без использования библиотек, у вас есть несколько отличных вариантов:

1. Используйте современный метод Element.after() для чистого, читаемого кода в современных браузерах
2. Воспользуйтесь insertBefore() с nextSibling для максимальной совместимости с браузерами
3. Создайте пользовательскую функцию insertAfter() для лучшей организации и переиспользования кода
4. Используйте insertAdjacentHTML() при работе с HTML-строками, а не DOM-элементами

Подход с insertBefore() и nextSibling остается наиболее надежным решением для проектов, требующих поддержки старых браузеров, в то время как метод after() предлагает наиболее элегантный синтаксис для современных сред разработки. Всегда учитывайте вашу целевую аудиторию и требования к поддержке браузеров при выборе подходящего метода для вашего проекта.