Вставка элемента перед другим элементом: Тренажер JavaScript: Покоряем HTML DOM

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

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

Список тем

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

Добавьте новый абзац текста перед существующим заголовком на странице. Используйте 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()` для вставки нового абзаца перед заголовком.

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

Результат

Лог

Выполнить

Отметить решенным

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

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

Добавьте новый элемент списка в начало неупорядоченного списка. Создайте новый элемент `<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()` для вставки нового элемента перед первым элементом списка.

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

Результат

Лог

Выполнить

Отметить решенным

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

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

Вставьте новый абзац перед элементом с классом "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()` для вставки нового абзаца.

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

Результат

Лог

Выполнить

Отметить решенным

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

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

Создайте новый элемент `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` перед кнопкой.

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

Результат

Лог

Выполнить

Отметить решенным

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

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

Вставьте изображение перед неупорядоченным списком. Используйте 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()` для вставки изображения перед списком.

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

Результат

Лог

Выполнить

Отметить решенным

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

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

Вставьте новый абзац перед вторым абзацем внутри контейнера. Используйте `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 "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

Вставьте новый заголовок `<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()` для вставки нового заголовка перед абзацем.

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

Результат

Лог

Выполнить

Отметить решенным

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