Вставка HTML-фрагмента в начало/конец элемента: Тренажер JavaScript: Покоряем HTML DOM

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

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

Список тем

Вставка элемента в конец списка

Добавьте новый пункт списка в конец существующего списка 'list'. Используйте JavaScript для создания нового элемента списка и вставки его внутрь элемента с id 'list'.

HTML

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

                      <ul id="list">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
</ul>

<ul id="list">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
</ul>

JavaScript

const list = document.input__1("list");
const newItem = document.input__2("li");
newItem.textContent = "Новый пункт";
list.input__3(newItem);

                     const list = document.input__1("list");
const newItem = document.input__2("li");
newItem.textContent = "Новый пункт";
list.input__3(newItem);

Для решения этой задачи вам потребуется: 1. Найти элемент списка, в который нужно вставить новый пункт, используя `document.getElementById()`. 2. Создать новый элемент списка `<li>` используя `document.createElement('li')`. 3. Задать текстовое содержимое для нового элемента списка, используя свойство `textContent`. 4. Добавить созданный элемент в конец списка, используя метод `appendChild()` элемента списка.

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

Результат

Лог

Выполнить

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

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

Вставка элемента в начало блока

Добавьте новый параграф в самое начало блока с id 'container'. Используйте JavaScript для создания параграфа и вставки его в начало контейнера.

HTML

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

                      <div id="container">
  <p>Параграф 1</p>
  <p>Параграф 2</p>
</div>

<div id="container">
  <p>Параграф 1</p>
  <p>Параграф 2</p>
</div>

JavaScript

const container = document.input__1("#container");
const newParagraph = document.input__2("p");
newParagraph.textContent = "Это новый параграф в начале";
container.input__3(newParagraph);

                     const container = document.input__1("#container");
const newParagraph = document.input__2("p");
newParagraph.textContent = "Это новый параграф в начале";
container.input__3(newParagraph);

Для решения этой задачи: 1. Найдите контейнер, используя `document.querySelector()`. 2. Создайте новый элемент параграфа `<p>`. 3. Задайте тексту параграфа значение 'Это новый параграф в начале'. 4. Используйте метод `prepend()` для вставки параграфа в начало контейнера.

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

Результат

Лог

Выполнить

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

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

Вставка HTML фрагмента в конец блока

Добавьте HTML фрагмент `<span>Важный текст</span>` в конец блока 'message'. Используйте метод `insertAdjacentHTML()` для вставки HTML кода.

HTML

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

                      <div id="message">
  <p>Основное сообщение</p>
</div>

<div id="message">
  <p>Основное сообщение</p>
</div>

JavaScript

const messageBlock = document.input__1("message");
const htmlFragment = "<input__2>Важный текст</input__3>";
messageBlock.input__4("beforeend", htmlFragment);

                     const messageBlock = document.input__1("message");
const htmlFragment = "<input__2>Важный текст</input__3>";
messageBlock.input__4("beforeend", htmlFragment);

Для решения: 1. Найдите элемент 'message' с помощью `document.getElementById()`. 2. Используйте метод `insertAdjacentHTML()` на элементе 'message'. 3. Первым аргументом для `insertAdjacentHTML()` укажите позицию вставки - `'beforeend'` (в конец элемента). 4. Вторым аргументом передайте строку с HTML фрагментом `<span>Важный текст</span>`.

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

Результат

Лог

Выполнить

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

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

Вставка HTML фрагмента в начало блока с классом

Вставьте HTML фрагмент `<strong>Внимание!</strong>` в самое начало блока с классом 'warning-block'. Используйте `querySelector` для выбора элемента и `insertAdjacentHTML()` для вставки.

HTML

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

                      <div class="warning-block">
  <p>Сообщение об ошибке</p>
</div>

<div class="warning-block">
  <p>Сообщение об ошибке</p>
</div>

JavaScript

const warning = document.input__1(".warning-block");
const strongHtml = "<input__2>Внимание!</input__3>";
warning.input__4("afterbegin", strongHtml);

                     const warning = document.input__1(".warning-block");
const strongHtml = "<input__2>Внимание!</input__3>";
warning.input__4("afterbegin", strongHtml);

Для решения: 1. Используйте `document.querySelector('.warning-block')` для выбора элемента по классу. 2. Примените метод `insertAdjacentHTML()` к найденному элементу. 3. Укажите позицию `'afterbegin'` для вставки в начало. 4. Передайте HTML фрагмент `<strong>Внимание!</strong>` вторым аргументом.

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

Результат

Лог

Выполнить

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

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

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

Добавьте новый абзац `<p>Новый первый параграф</p>` перед первым параграфом внутри элемента 'content-block'. Используйте `insertBefore()` метод.

HTML

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

                      <div id="content-block">
  <p>Параграф 1</p>
  <p>Параграф 2</p>
</div>

<div id="content-block">
  <p>Параграф 1</p>
  <p>Параграф 2</p>
</div>

JavaScript

const parentElement = document.input__1("content-block");
const firstChild = parentElement.input__2;
const newParagraph = document.input__3("p");
newParagraph.textContent = "Новый первый параграф";
parentElement.input__4(newParagraph, firstChild);

                     const parentElement = document.input__1("content-block");
const firstChild = parentElement.input__2;
const newParagraph = document.input__3("p");
newParagraph.textContent = "Новый первый параграф";
parentElement.input__4(newParagraph, firstChild);

Для решения: 1. Найдите родительский элемент 'content-block' через `document.getElementById()`. 2. Найдите первый дочерний элемент-параграф внутри 'content-block' (можно использовать `parentElement.firstElementChild`). 3. Создайте новый элемент параграфа `<p>`. 4. Используйте метод `insertBefore()` на родительском элементе. Первым аргументом передайте новый параграф, вторым - первый дочерний элемент.

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

Результат

Лог

Выполнить

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

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

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

Добавьте изображение в конец блока 'image-container', после последнего изображения. Используйте `appendChild` и HTML для элемента изображения. Используйте изображение с url: https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png

HTML

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

                      <div id="image-container">
  <img src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png" alt="Изображение 1">
</div>

<div id="image-container">
  <img src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png" alt="Изображение 1">
</div>

JavaScript

const container = document.input__1("#image-container");
const newImage = document.input__2("img");
newImage.input__3 = "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png";
newImage.alt = "Новое изображение";
container.input__4(newImage);

                     const container = document.input__1("#image-container");
const newImage = document.input__2("img");
newImage.input__3 = "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png";
newImage.alt = "Новое изображение";
container.input__4(newImage);

Для решения: 1. Найдите контейнер 'image-container' используя `document.querySelector()`. 2. Создайте новый элемент `<img>` через `document.createElement()`. 3. Установите атрибут `src` для нового изображения на 'https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png'. 4. Используйте `appendChild()` для добавления изображения в контейнер.

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

Результат

Лог

Выполнить

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

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

Вставка нескольких элементов в начало блока

Добавьте два новых элемента: заголовок `<h2>Новый заголовок</h2>` и параграф `<p>Новый параграф</p>` в самое начало элемента 'multi-insert'. Используйте `prepend()` метод.

HTML

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

                      <div id="multi-insert">
  <p>Существующий параграф</p>
</div>

<div id="multi-insert">
  <p>Существующий параграф</p>
</div>

JavaScript

const container = document.input__1("multi-insert");
const newHeading = document.input__2("h2");
newHeading.textContent = "Новый заголовок";
const newParagraph = document.input__3("p");
newParagraph.textContent = "Новый параграф";
container.input__4(newParagraph, newHeading);

                     const container = document.input__1("multi-insert");
const newHeading = document.input__2("h2");
newHeading.textContent = "Новый заголовок";
const newParagraph = document.input__3("p");
newParagraph.textContent = "Новый параграф";
container.input__4(newParagraph, newHeading);

Для решения: 1. Получите элемент 'multi-insert' используя `document.getElementById()`. 2. Создайте элемент заголовка `<h2>` и элемент параграфа `<p>`. 3. Задайте текст содержимого для обоих элементов. 4. Используйте `prepend()` на родительском элементе и передайте в него *сначала параграф, а затем заголовок*. Порядок важен, `prepend` вставляет элементы в том порядке, в котором они переданы, в начало.

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

Результат

Лог

Выполнить

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

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

Удаление содержимого и вставка нового HTML

Полностью замените содержимое элемента 'content-replace' на новый HTML фрагмент: `<h3>Новый заголовок контента</h3><p>Новый текст контента</p>`. Используйте свойство `innerHTML`.

HTML

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

                      <div id="content-replace">
  <h2>Старый заголовок</h2>
  <p>Старый текст</p>
</div>

<div id="content-replace">
  <h2>Старый заголовок</h2>
  <p>Старый текст</p>
</div>

JavaScript

const container = document.input__1("#content-replace");
container.input__2 = "<input__3>Новый заголовок контента</input__4><input__5>Новый текст контента</input__6>";

                     const container = document.input__1("#content-replace");
container.input__2 = "<input__3>Новый заголовок контента</input__4><input__5>Новый текст контента</input__6>";

Для решения: 1. Найдите элемент 'content-replace' с помощью `document.querySelector()`. 2. Используйте свойство `innerHTML` элемента 'content-replace'. 3. Присвойте свойству `innerHTML` строку, содержащую новый HTML фрагмент: `<h3>Новый заголовок контента</h3><p>Новый текст контента</p>`.

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

Результат

Лог

Выполнить

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

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