Добавление элемента в определенную позицию внутри списка дочерних элементов: Тренажер JavaScript: Покоряем HTML DOM

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

В этом тренажере вы попрактикуетесь добавлять HTML-элементы в определенные позиции внутри списка дочерних элементов существующего элемента. Вам будет предоставлен HTML-код, и ваша задача - дописать JavaScript-код, чтобы добиться желаемого результата. В каждом задании есть пропуски в коде (обозначенные как input__1, input__2 и т.д.), которые вам нужно заполнить. После заполнения пропусков вы сможете выполнить код и увидеть результат визуально. Задания расположены в порядке возрастания сложности. Это позволит вам закрепить знания о методах манипуляции DOM, таких как appendChild, insertBefore, insertAdjacentElement и других.

Список тем

Модуль 1: Основы выбора элементов
Модуль 2: Манипуляция содержимым
Модуль 3: Работа с атрибутами
Модуль 4: Управление классами
Модуль 5: Управление стилями
Модуль 6: Создание и удаление элементов
- Создание нового элемента.
- Вставка элемента перед другим элементом.
- Вставка элемента после другого элемента.
- Добавление элемента в определенную позицию внутри списка дочерних элементов.
- Удаление элемента из DOM.
- Замена одного элемента другим.
- Перемещение существующего элемента в другое место DOM..
- Очистка содержимого элемента без его удаления.
Модуль 7: Обработка событий
Модуль 8: Работа с формами
Модуль 9: Продвинутые манипуляции
Модуль 10: Работа с размерами и прокруткой
Модуль 11: Работа с медиа-элементами
- Создание простой галереи изображений.
- Работа с Canvas.
Модуль 12: Практические задания
- Создание интерактивного списка задач (todo list).
- Создание простого калькулятора.

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

Вам дан список `<ul>` с несколькими элементами `<li>`. Ваша задача - добавить новый элемент `<li>` с текстом "Новый элемент" в конец этого списка. Используйте JavaScript, чтобы создать новый элемент и добавить его в список.

HTML

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

                      <ul id="myList">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>

<ul id="myList">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>

JavaScript

const newListElement = document.createElement(input__1);
newListElement.textContent = "Новый элемент";
const list = document.getElementById(input__2);
list.input__3(newListElement);

                     const newListElement = document.createElement(input__1);
newListElement.textContent = "Новый элемент";
const list = document.getElementById(input__2);
list.input__3(newListElement);

Используйте `document.createElement` для создания нового элемента `<li>`. Затем используйте `document.getElementById`, чтобы получить ссылку на список `<ul>`, и метод `appendChild`, чтобы добавить новый элемент в конец списка.

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

Результат

Лог

Выполнить

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

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

Добавление элемента в начало списка

Вам дан список `<ul>` с несколькими элементами `<li>`. Добавьте новый элемент `<li>` с текстом "Самый первый элемент" в начало списка. Используйте подходящий метод JavaScript для вставки элемента перед первым дочерним элементом.

HTML

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

                      <ul id="myList">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>

<ul id="myList">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>

JavaScript

const newListElement = document.createElement("li");
newListElement.textContent = "Самый первый элемент";
const list = document.getElementById("myList");
list.insertBefore(input__1, list.input__2);

                     const newListElement = document.createElement("li");
newListElement.textContent = "Самый первый элемент";
const list = document.getElementById("myList");
list.insertBefore(input__1, list.input__2);

Получите ссылку на список `<ul>` с помощью `document.getElementById`. Затем получите ссылку на первый дочерний элемент списка, используя `firstChild`. Используйте метод `insertBefore`, чтобы вставить новый элемент перед первым дочерним.

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

Результат

Лог

Выполнить

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

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

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

Дан список `<ul>` с несколькими элементами `<li>`. Добавьте новый элемент `<li>` с текстом "Новый элемент перед вторым" непосредственно перед вторым элементом списка (с текстом "Элемент 2").

HTML

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

                      <ul id="myList">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>

<ul id="myList">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>

JavaScript

const newListElement = document.createElement("li");
newListElement.textContent = "Новый элемент перед вторым";
const list = document.getElementById("myList");
const secondElement = list.input__1[input__2];
list.insertBefore(newListElement, secondElement);

                     const newListElement = document.createElement("li");
newListElement.textContent = "Новый элемент перед вторым";
const list = document.getElementById("myList");
const secondElement = list.input__1[input__2];
list.insertBefore(newListElement, secondElement);

Используйте `document.getElementById` для получения списка. Затем получите ссылку на второй элемент списка (можно использовать `children[1]` или `querySelector` с селектором `:nth-child(2)`). Используйте `insertBefore` для вставки нового элемента перед найденным.

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

Результат

Лог

Выполнить

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

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

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

Дан список `<ul>` с несколькими `<li>`. Добавьте новый `<li>` с текстом "Новый после второго" сразу после второго элемента (с текстом "Элемент 2").

HTML

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

                      <ul id="myList">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>

<ul id="myList">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>

JavaScript

const newListElement = document.createElement("li");
newListElement.textContent = "Новый после второго";
const list = document.getElementById("myList");
const secondElement = list.children[1];
const input__1 = secondElement.nextSibling;
if (nextSibling) {
  list.insertBefore(newListElement, nextSibling);
} else {
  list.input__2(newListElement);
}

                     const newListElement = document.createElement("li");
newListElement.textContent = "Новый после второго";
const list = document.getElementById("myList");
const secondElement = list.children[1];
const input__1 = secondElement.nextSibling;
if (nextSibling) {
  list.insertBefore(newListElement, nextSibling);
} else {
  list.input__2(newListElement);
}

Получите ссылку на второй элемент списка. Используйте `nextSibling` для получения следующего узла и `insertBefore` для вставки нового элемента. Если `nextSibling` равен `null`, используйте `appendChild`.

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

Результат

Лог

Выполнить

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

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

Добавление элемента с использованием insertAdjacentElement

Дан список `<ul>`. Добавьте новый элемент `<li>` с текстом "Новый элемент (adjacent)" после последнего элемента списка, используя метод `insertAdjacentElement`.

HTML

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

                      <ul id="myList">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>

<ul id="myList">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>

JavaScript

const newListElement = document.createElement("li");
newListElement.textContent = "Новый элемент (adjacent)";
const list = document.getElementById("myList");
list.insertAdjacentElement(input__1, newListElement);

                     const newListElement = document.createElement("li");
newListElement.textContent = "Новый элемент (adjacent)";
const list = document.getElementById("myList");
list.insertAdjacentElement(input__1, newListElement);

Используйте `document.getElementById`, чтобы получить ссылку на список. Затем используйте `insertAdjacentElement` с позицией 'afterend' и новым элементом, созданным с помощью `document.createElement`.

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

Результат

Лог

Выполнить

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

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

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

Дан пустой список `<ul>`. Добавьте в него три новых элемента `<li>` с текстами "Элемент A", "Элемент B" и "Элемент C" за одну операцию.

HTML

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

                      <ul id="myList"></ul>

<ul id="myList"></ul>

JavaScript

const list = document.getElementById("myList");
const elementA = document.createElement("li");
elementA.textContent = "Элемент A";
const elementB = document.createElement("li");
elementB.textContent = "Элемент B";
const elementC = document.createElement("li");
elementC.textContent = "Элемент C";
list.append(input__1, input__2, input__3);

                     const list = document.getElementById("myList");
const elementA = document.createElement("li");
elementA.textContent = "Элемент A";
const elementB = document.createElement("li");
elementB.textContent = "Элемент B";
const elementC = document.createElement("li");
elementC.textContent = "Элемент C";
list.append(input__1, input__2, input__3);

Создайте три новых элемента `<li>` с помощью `document.createElement`. Затем используйте метод `append`, чтобы добавить все три элемента в список `<ul>` за один раз. Метод `append` позволяет добавлять несколько элементов, перечисляя их через запятую.

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

Результат

Лог

Выполнить

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

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

Добавление элемента с изображением

Дан список `<ul>`. Добавьте в конец списка новый элемент `<li>`, содержащий изображение.

HTML

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

                      <ul id="imageList">
  <li>Элемент 1</li>
</ul>

<ul id="imageList">
  <li>Элемент 1</li>
</ul>

JavaScript

const newListElement = document.createElement("li");
const image = document.createElement(input__1);
image.src = input__2;
newListElement.appendChild(image);
const list = document.getElementById("imageList");
list.appendChild(newListElement);

                     const newListElement = document.createElement("li");
const image = document.createElement(input__1);
image.src = input__2;
newListElement.appendChild(image);
const list = document.getElementById("imageList");
list.appendChild(newListElement);

Создайте элемент `<li>` и элемент `<img>`. Установите атрибут `src` изображения. Добавьте изображение внутрь `<li>`, а затем `<li>` в `<ul>`.

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

Результат

Лог

Выполнить

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

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

Добавление элемента с классом

Добавьте новый элемент `<div>` с классом "highlight" в конец элемента с id="container".

CSS

.highlight {
  background-color: yellow;
}

HTML

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

                      <div id="container">
  <p>Существующий контент</p>
</div>

<div id="container">
  <p>Существующий контент</p>
</div>

JavaScript

const newDiv = document.createElement("div");
newDiv.classList.add(input__1);
const container = document.getElementById("container");
container.appendChild(newDiv);

                     const newDiv = document.createElement("div");
newDiv.classList.add(input__1);
const container = document.getElementById("container");
container.appendChild(newDiv);

Создайте `<div>` с помощью `createElement`. Добавьте класс с помощью `classList.add()`. Добавьте элемент в контейнер, используя `appendChild`.

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

Результат

Лог

Выполнить

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

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

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

Вставьте новый элемент `<p>` с текстом "Привет, мир!" и атрибутом `data-id="123"` перед элементом с id="tt".

HTML

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

                      <div id="container">
 <span id="tt">Целевой элемент</span>
</div>

<div id="container">
 <span id="tt">Целевой элемент</span>
</div>

JavaScript

const newParagraph = document.createElement(input__1);
newParagraph.textContent = "Привет, мир!";
newParagraph.setAttribute(input__2, input__3);
const ttElement = document.getElementById("tt");
const parent = ttElement.parentNode
parent.insertBefore(newParagraph, ttElement);

                     const newParagraph = document.createElement(input__1);
newParagraph.textContent = "Привет, мир!";
newParagraph.setAttribute(input__2, input__3);
const ttElement = document.getElementById("tt");
const parent = ttElement.parentNode
parent.insertBefore(newParagraph, ttElement);

Создайте элемент `<p>`. Установите текст с помощью `textContent`. Установите атрибут с помощью `setAttribute`. Используйте `insertBefore` для вставки.

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

Результат

Лог

Выполнить

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

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

Добавление элемента внутрь другого элемента

Дан элемент `<div id="outer">`. Добавьте внутрь него новый элемент `<span id="inner">`, а внутрь этого `<span>` добавьте текст "Вложенный текст".

HTML

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

                      <div id="outer"></div>

<div id="outer"></div>

JavaScript

const innerSpan = document.createElement("span");
innerSpan.id = "inner";
innerSpan.textContent = "Вложенный текст";
const outerDiv = document.getElementById(input__1);
outerDiv.input__2(innerSpan);

                     const innerSpan = document.createElement("span");
innerSpan.id = "inner";
innerSpan.textContent = "Вложенный текст";
const outerDiv = document.getElementById(input__1);
outerDiv.input__2(innerSpan);

Создайте `<span>` с помощью `createElement`. Установите текст. Получите ссылку на `#outer`. Добавьте `<span>` внутрь `#outer`.

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

Результат

Лог

Выполнить

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

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

Добавление элемента перед первым дочерним с использованием firstElementChild

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

HTML

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

                      <div id="container">
  <span>Первый</span>
  <p>Второй</p>
</div>

<div id="container">
  <span>Первый</span>
  <p>Второй</p>
</div>

JavaScript

const newParagraph = document.createElement("p");
newParagraph.textContent = "Новый первый абзац";
const container = document.getElementById("container");
container.insertBefore(newParagraph, container.input__1);

                     const newParagraph = document.createElement("p");
newParagraph.textContent = "Новый первый абзац";
const container = document.getElementById("container");
container.insertBefore(newParagraph, container.input__1);

Используйте `firstElementChild` вместо `firstChild` для получения первого дочернего *элемента* (а не текстового узла).

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

Результат

Лог

Выполнить

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

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

Добавление элемента, используя insertAdjacentHTML

Дан `<div id="container">`. Добавьте `<p>Привет!</p>` *внутрь* `div`, *перед* всем остальным его содержимым, используя `insertAdjacentHTML`.

HTML

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

                      <div id="container"><span>Существующий текст</span></div>

<div id="container"><span>Существующий текст</span></div>

JavaScript

const container = document.getElementById("container");
container.insertAdjacentHTML(input__1, input__2);

                     const container = document.getElementById("container");
container.insertAdjacentHTML(input__1, input__2);

Используйте `insertAdjacentHTML` с позицией `afterbegin`.

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

Результат

Лог

Выполнить

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

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

Добавление элемента после последнего дочернего с использованием lastElementChild

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

HTML

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

                      <div id="container">
  <span>Первый</span>
  <p>Второй</p>
</div>

<div id="container">
  <span>Первый</span>
  <p>Второй</p>
</div>

JavaScript

const newParagraph = document.createElement("p");
newParagraph.textContent = "Новый последний абзац";
const container = document.getElementById("container");
const lastChild = container.input__1;
container.insertAdjacentElement('afterend', newParagraph);

                     const newParagraph = document.createElement("p");
newParagraph.textContent = "Новый последний абзац";
const container = document.getElementById("container");
const lastChild = container.input__1;
container.insertAdjacentElement('afterend', newParagraph);

Используйте `lastElementChild` для получения последнего дочернего *элемента*. Затем используйте `nextSibling` и `insertBefore`, либо `insertAdjacentElement` с позицией 'afterend'.

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

Результат

Лог

Выполнить

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

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

Комплексное задание: создание списка

Создайте с нуля список `<ul>` с тремя элементами `<li>`: "Первый", "Второй", "Третий". Добавьте этот список в элемент `<div>` с id="container".

HTML

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

                      <div id="container"></div>

<div id="container"></div>

JavaScript

const ul = document.createElement(input__1);
const li1 = document.createElement("li");
li1.textContent = "Первый";
const li2 = document.createElement("li");
li2.textContent = "Второй";
const li3 = document.createElement("li");
li3.textContent = "Третий";
ul.appendChild(li1);
ul.appendChild(li2);
ul.appendChild(li3);
const container = document.getElementById("container");
container.input__2(ul);

                     const ul = document.createElement(input__1);
const li1 = document.createElement("li");
li1.textContent = "Первый";
const li2 = document.createElement("li");
li2.textContent = "Второй";
const li3 = document.createElement("li");
li3.textContent = "Третий";
ul.appendChild(li1);
ul.appendChild(li2);
ul.appendChild(li3);
const container = document.getElementById("container");
container.input__2(ul);

Создайте `<ul>` и три `<li>`. Добавьте текст в `<li>`. Добавьте `<li>` в `<ul>`. Получите ссылку на `<div>`. Добавьте `<ul>` в `<div>`.

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

Результат

Лог

Выполнить

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

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