Вставка элемента перед другим элементом [Модуль 6: Создание и удаление элементов]: Тренажер JavaScript: Покоряем HTML DOM

Тренажер по работе с HTML DOM на JavaScript для пользователей с начальным и средним уровнем подготовки.

В этом разделе вы попрактикуетесь в динамическом изменении HTML-структуры страницы с помощью JavaScript. Вы научитесь вставлять новые элементы перед существующими элементами, используя различные методы DOM API. Каждое задание предоставит вам готовый HTML и JavaScript код с пропусками. Ваша задача - заполнить пропуски в JavaScript коде, чтобы выполнить поставленную задачу и увидеть результат на экране. Упражнения расположены от простого к сложному, начиная с базовых операций и заканчивая более комплексными сценариями.

Список тем

Вставка абзаца перед заголовком

id: 37037_insert-paragraph-before-heading

Добавьте новый абзац текста перед существующим заголовком на странице. Используйте JavaScript для создания нового элемента абзаца и вставьте его в DOM перед элементом с идентификатором "main-heading".

HTML

Восстановить HTML

                      <div id="container">
  <h1 id="main-heading">Главный заголовок</h1>
</div>

<div id="container">
  <h1 id="main-heading">Главный заголовок</h1>
</div>

JavaScript

const newParagraph = document.input__1('p');
newParagraph.textContent = "Это новый абзац.";
const heading = document.input__2('main-heading');
const parentElement = heading.input__3;
parentElement.input__4(newParagraph, heading);

                     const newParagraph = document.input__1('p');
newParagraph.textContent = "Это новый абзац.";
const heading = document.input__2('main-heading');
const parentElement = heading.input__3;
parentElement.input__4(newParagraph, heading);

Для решения этой задачи вам потребуется: 1. Найти элемент, перед которым нужно вставить новый элемент (заголовок). 2. Создать новый элемент абзаца (`<p>`). 3. Задать текст для нового абзаца. 4. Найти родительский элемент заголовка. 5. Использовать метод `insertBefore()` для вставки нового абзаца перед заголовком.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Вставка элемента списка перед первым элементом

id: 37037_insert-list-item-before-first

Добавьте новый элемент списка в начало неупорядоченного списка. Создайте новый элемент `<li>` с текстом "Новый элемент списка" и вставьте его перед первым элементом списка.

HTML

Восстановить HTML

                      <ul id="myList">
  <li class="list-item">Первый элемент</li>
  <li class="list-item">Второй элемент</li>
</ul>

<ul id="myList">
  <li class="list-item">Первый элемент</li>
  <li class="list-item">Второй элемент</li>
</ul>

JavaScript

const list = document.input__1('myList');
const firstListItem = list.input__2('li');
const newListItem = document.createElement('li');
newListItem.textContent = "Новый элемент списка";
list.input__3(newListItem, input__4);

                     const list = document.input__1('myList');
const firstListItem = list.input__2('li');
const newListItem = document.createElement('li');
newListItem.textContent = "Новый элемент списка";
list.input__3(newListItem, input__4);

Для решения задачи: 1. Найдите неупорядоченный список (`<ul>`). 2. Найдите первый элемент списка (`<li>`). 3. Создайте новый элемент списка (`<li>`). 4. Задайте текст для нового элемента списка. 5. Используйте метод `insertBefore()` для вставки нового элемента перед первым элементом списка.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Вставка элемента перед элементом с классом

id: 37037_insert-before-class

Вставьте новый абзац перед элементом с классом "highlight". Используйте `querySelector` для выбора элемента перед которым нужно вставить новый абзац.

CSS

.highlight {
  background-color: yellow;
}

HTML

Восстановить HTML

                      <div id="container">
  <p>Обычный абзац</p>
  <p class="highlight">Этот абзац выделен</p>
  <p>Еще один абзац</p>
</div>

<div id="container">
  <p>Обычный абзац</p>
  <p class="highlight">Этот абзац выделен</p>
  <p>Еще один абзац</p>
</div>

JavaScript

const highlightedElement = document.input__1('.highlight');
const newParagraph = document.input__2('p');
newParagraph.textContent = "Новый абзац перед выделенным.";
const parent = highlightedElement.input__3;
parent.input__4(newParagraph, highlightedElement);

                     const highlightedElement = document.input__1('.highlight');
const newParagraph = document.input__2('p');
newParagraph.textContent = "Новый абзац перед выделенным.";
const parent = highlightedElement.input__3;
parent.input__4(newParagraph, highlightedElement);

Шаги для решения: 1. Найдите элемент с классом "highlight" используя `querySelector`. 2. Создайте новый элемент абзаца (`<p>`). 3. Задайте текст для нового абзаца. 4. Найдите родительский элемент элемента с классом "highlight". 5. Используйте `insertBefore()` для вставки нового абзаца.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Вставка стилизованного элемента перед кнопкой

id: 37037_insert-styled-before-button

Создайте новый элемент `div` с красным фоном и текстом "Важное сообщение" и вставьте его перед кнопкой на странице.

HTML

Восстановить HTML

                      <button id="myButton">Нажми меня</button>

<button id="myButton">Нажми меня</button>

JavaScript

const button = document.input__1('myButton');
const newDiv = document.createElement('div');
newDiv.textContent = "Важное сообщение";
newDiv.style.input__2 = "red";
const parent = button.input__3;
parent.input__4(newDiv, button);

                     const button = document.input__1('myButton');
const newDiv = document.createElement('div');
newDiv.textContent = "Важное сообщение";
newDiv.style.input__2 = "red";
const parent = button.input__3;
parent.input__4(newDiv, button);

Для решения задачи: 1. Найдите кнопку на странице. 2. Создайте новый элемент `div`. 3. Задайте текст для нового `div`. 4. Установите CSS свойство `backgroundColor` для нового `div` в "red". 5. Найдите родительский элемент кнопки. 6. Используйте `insertBefore()` для вставки нового `div` перед кнопкой.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Вставка изображения перед списком

id: 37037_insert-image-before-list

Вставьте изображение перед неупорядоченным списком. Используйте URL изображения из предоставленных ресурсов. Задайте атрибут `src` для нового элемента `img` и вставьте его перед списком с ID "image-list".

HTML

Восстановить HTML

                      <ul id="image-list">
  <li>Элемент списка 1</li>
  <li>Элемент списка 2</li>
</ul>

<ul id="image-list">
  <li>Элемент списка 1</li>
  <li>Элемент списка 2</li>
</ul>

JavaScript

const listElement = document.input__1('image-list');
const newImage = document.createElement('img');
newImage.src = "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png";
const parent = listElement.input__2;
parent.input__3(newImage, listElement);

                     const listElement = document.input__1('image-list');
const newImage = document.createElement('img');
newImage.src = "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png";
const parent = listElement.input__2;
parent.input__3(newImage, listElement);

Шаги для решения: 1. Найдите список с ID "image-list". 2. Создайте новый элемент `img`. 3. Установите атрибут `src` для нового `img` на URL изображения. 4. Найдите родительский элемент списка. 5. Используйте `insertBefore()` для вставки изображения перед списком.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Вставка элемента в определенную позицию внутри родителя

id: 37037_insert-at-position

Вставьте новый абзац перед вторым абзацем внутри контейнера. Используйте `querySelectorAll` для получения всех абзацев внутри контейнера и вставьте новый абзац перед вторым элементом полученной коллекции.

HTML

Восстановить HTML

                      <div id="text-container">
  <p>Первый абзац</p>
  <p>Второй абзац</p>
  <p>Третий абзац</p>
</div>

<div id="text-container">
  <p>Первый абзац</p>
  <p>Второй абзац</p>
  <p>Третий абзац</p>
</div>

JavaScript

const container = document.input__1('text-container');
const paragraphs = container.input__2('p');
const newParagraph = document.createElement('p');
newParagraph.textContent = "Новый абзац в середине.";
container.input__3(newParagraph, paragraphs[input__4]);

                     const container = document.input__1('text-container');
const paragraphs = container.input__2('p');
const newParagraph = document.createElement('p');
newParagraph.textContent = "Новый абзац в середине.";
container.input__3(newParagraph, paragraphs[input__4]);

Для решения задачи: 1. Найдите контейнер с ID "text-container". 2. Получите коллекцию всех абзацев внутри контейнера используя `querySelectorAll`. 3. Создайте новый элемент абзаца (`<p>`). 4. Задайте текст для нового абзаца. 5. Используйте `insertBefore()` для вставки нового абзаца перед вторым абзацем из коллекции.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Вставка элемента перед первым элементом другого родителя

id: 37037_insert-before-element-different-parent

Переместите первый элемент списка из списка с ID "list-from" и вставьте его перед первым элементом списка с ID "list-to".

HTML

Восстановить HTML

                      <ul id="list-from">
  <li class="item">Элемент 1 из списка 1</li>
  <li class="item">Элемент 2 из списка 1</li>
</ul>
<ul id="list-to">
  <li class="item">Элемент 1 из списка 2</li>
  <li class="item">Элемент 2 из списка 2</li>
</ul>

<ul id="list-from">
  <li class="item">Элемент 1 из списка 1</li>
  <li class="item">Элемент 2 из списка 1</li>
</ul>
<ul id="list-to">
  <li class="item">Элемент 1 из списка 2</li>
  <li class="item">Элемент 2 из списка 2</li>
</ul>

JavaScript

const listFrom = document.input__1('list-from');
const firstItemFrom = listFrom.input__2('li');
const listTo = document.getElementById('list-to');
const firstItemTo = listTo.querySelector('li');
listTo.input__3(firstItemFrom, input__4);

                     const listFrom = document.input__1('list-from');
const firstItemFrom = listFrom.input__2('li');
const listTo = document.getElementById('list-to');
const firstItemTo = listTo.querySelector('li');
listTo.input__3(firstItemFrom, input__4);

Шаги для решения: 1. Найдите список-источник с ID "list-from". 2. Найдите первый элемент списка-источника. 3. Найдите список-назначение с ID "list-to". 4. Найдите первый элемент списка-назначения. 5. Используйте метод `insertBefore()` на списке-назначении, чтобы вставить элемент из списка-источника перед первым элементом списка-назначения.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Вставка элемента перед абзацем внутри div

id: 37037_insert-before-paragraph-in-div

Вставьте новый заголовок `<h2>` с текстом "Подзаголовок" перед абзацем с классом "paragraph-target" внутри контейнера с ID "inner-container".

HTML

Восстановить HTML

                      <div id="main-container">
  <div id="inner-container">
    <p class="paragraph-target">Целевой абзац</p>
  </div>
</div>

<div id="main-container">
  <div id="inner-container">
    <p class="paragraph-target">Целевой абзац</p>
  </div>
</div>

JavaScript

const targetParagraph = document.input__1('#inner-container .paragraph-target');
const newHeading = document.createElement('h2');
newHeading.textContent = "Подзаголовок";
const parent = targetParagraph.input__2;
parent.input__3(newHeading, targetParagraph);

                     const targetParagraph = document.input__1('#inner-container .paragraph-target');
const newHeading = document.createElement('h2');
newHeading.textContent = "Подзаголовок";
const parent = targetParagraph.input__2;
parent.input__3(newHeading, targetParagraph);

Для решения задачи: 1. Найдите контейнер с ID "inner-container". 2. Найдите абзац с классом "paragraph-target" внутри контейнера. 3. Создайте новый элемент `<h2>`. 4. Задайте текст для нового `<h2>` как "Подзаголовок". 5. Найдите родительский элемент абзаца. 6. Используйте `insertBefore()` для вставки нового заголовка перед абзацем.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку