как вставить элемент после другого в javascript без использования библиотек
Ответы
Рассмотрим пример:
<!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(), как показано в закомментированном коде. Этот метод находит следующий соседний элемент и вставляет новый элемент перед ним.
0
0