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

год назад

Nikolai Gagarinov

Присоединяйтесь к нашему Telegram-сообществу

Ответы

Рассмотрим пример:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Вставка элемента</title>
</head>
<body>
    <div id="container">
        <p id="first">Первый параграф.</p>
    </div>

    <script>
        // 1. Создаем новый элемент
        const newElement = document.createElement('p');
        newElement.textContent = 'Вставленный параграф.';

        // 2. Находим элемент, после которого будет вставлен новый элемент
        const referenceElement = document.getElementById('first');

        // 3. Вставляем новый элемент после найденного
        referenceElement.insertAdjacentElement('afterend', newElement);

        // Альтернативный способ с использованием insertBefore
        // const container = document.getElementById('container');
        // container.insertBefore(newElement, referenceElement.nextSibling);
    </script>
</body>
</html>

Описание кода:

Создание нового элемента:
const newElement = document.createElement('p'); newElement.textContent = 'Вставленный параграф.';
Здесь мы создаем новый элемент <p> и добавляем текстовое содержимое к нему.
Выбор элемента:
const referenceElement = document.getElementById('first');
Мы выбираем существующий элемент с id="first".
Вставка нового элемента:
referenceElement.insertAdjacentElement('afterend', newElement);
Метод insertAdjacentElement('afterend', newElement) вставляет созданный элемент сразу после выбранного.

В качестве альтернативы для вставки можно использовать метод insertBefore(), как показано в закомментированном коде. Этот метод находит следующий соседний элемент и вставляет новый элемент перед ним.

9 месяцев назад

Ivan Gagarinov

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

2 месяца

ООП на Javascript

Навык глубокого понимания архитектуры и написания чистого кода, позволяющий решать сложные задачи

1 месяц

СИКП на JS

Навык понимать программы на фундаментальном уровне, уверенно проходить собеседования и решать сложные задачи

1 месяц

Асинхронное программирование на JS

Навык асинхронного программирования в JavaScript: писать быстрый код, расти в грейде и успешно проходить собеседования.

8 месяцев

Автоматизатор тестирования на JavaScript

Git, JavaScript, Playwright, бэкенд-тесты, юнит-тесты, API-тесты, UI-тесты, Github Actions, HTTP/HTTPS, API, Docker, SQL

Похожие вопросы