Логотип Хекслета
/
Вопросы и ответы
/
JavaScript
/

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

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

JavaScript
JS

год назад

Nikolai Gagarinov

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

Ответы

0

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

<!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>

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

  1. Создание нового элемента:

    const newElement = document.createElement('p');
newElement.textContent = 'Вставленный параграф.';

    Здесь мы создаем новый элемент <p> и добавляем текстовое содержимое к нему.

  2. Выбор элемента:

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

    Мы выбираем существующий элемент с id="first".

  3. Вставка нового элемента:

    referenceElement.insertAdjacentElement('afterend', newElement);

    Метод insertAdjacentElement('afterend', newElement) вставляет созданный элемент сразу после выбранного.

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

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

Ivan Gagarinov

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