как вставить элемент после другого в javascript без использования библиотек
Вставка элемента после другого в JavaScript – это часто необходимая операция при работе с DOM (Document Object Model). Мы можем использовать методы, встроенные в JavaScript, чтобы управлять узлами в HTML-документе. Давайте рассмотрим шаги, как это сделать.
Шаги для вставки элемента после другого:
Создание нового элемента: Сначала мы создадим новый элемент, который хотим вставить. Для этого используется метод
document.createElement().Выбор элемента, после которого будет выполнена вставка: С помощью метода
document.querySelector()или других методов, таких какgetElementById(),getElementsByClassName(), мы можем выбрать существующий элемент в документе.Использование метода
insertAdjacentElementилиinsertBefore: Мы можем использовать методinsertAdjacentElement()для вставки нового элемента или методinsertBefore()для вставки перед следующим соседним элементом.
Пример кода
Давайте рассмотрим пример:
<!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(), как показано в закомментированном коде. Этот метод находит следующий соседний элемент и вставляет новый элемент перед ним.
