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

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

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

Список тем

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

Переместить элемент в конец родителя

Переместите элемент с id "child" внутрь элемента с id "parent", сделав его последним дочерним элементом.

HTML

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

                      <div id="parent">
  <p>Первый параграф</p>
  <p>Второй параграф</p>
</div>
<div id="child">Перемещаемый элемент</div>

<div id="parent">
  <p>Первый параграф</p>
  <p>Второй параграф</p>
</div>
<div id="child">Перемещаемый элемент</div>

JavaScript

const parent = document.getElementById("parent");
const child = document.input__1("child");
parent.input__2(child);

                     const parent = document.getElementById("parent");
const child = document.input__1("child");
parent.input__2(child);

Используйте метод `appendChild()` элемента, к которому нужно добавить дочерний элемент. В качестве аргумента передайте ссылку на перемещаемый элемент.

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

Результат

Лог

Выполнить

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

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

Переместить элемент в начало родителя

Переместите элемент с id "child" внутрь элемента с id "parent" так, чтобы он стал первым дочерним элементом.

HTML

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

                      <div id="parent">
  <p>Первый параграф</p>
</div>
<div id="child">Перемещаемый элемент</div>

<div id="parent">
  <p>Первый параграф</p>
</div>
<div id="child">Перемещаемый элемент</div>

JavaScript

const parent = document.getElementById("parent");
const child = document.getElementById("child");
const firstChild = parent.input__1;
parent.insertBefore(input__2, firstChild);

                     const parent = document.getElementById("parent");
const child = document.getElementById("child");
const firstChild = parent.input__1;
parent.insertBefore(input__2, firstChild);

Используйте метод `insertBefore()` родительского элемента. Первым аргументом передайте перемещаемый элемент, а вторым - элемент, перед которым нужно вставить.

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

Результат

Лог

Выполнить

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

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

Переместить элемент перед другим элементом

Переместите элемент с id "movable" так, чтобы он оказался непосредственно перед элементом с id "tt".

HTML

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

                      <div id="container">
  <p id="tt">Целевой элемент</p>
  <p>Другой параграф</p>
</div>
<div id="movable">Перемещаемый элемент</div>

<div id="container">
  <p id="tt">Целевой элемент</p>
  <p>Другой параграф</p>
</div>
<div id="movable">Перемещаемый элемент</div>

JavaScript

const tt = document.getElementById("tt");
const movable = document.getElementById("movable");
input__1.insertBefore(movable, tt);

                     const tt = document.getElementById("tt");
const movable = document.getElementById("movable");
input__1.insertBefore(movable, tt);

Используйте метод `insertBefore()` родительского элемента целевого элемента (`tt`).

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

Результат

Лог

Выполнить

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

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

Переместить элемент после другого элемента

Переместите элемент с id "movable" так, чтобы он оказался сразу после элемента с id "tt".

HTML

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

                      <div id="container">
  <p id="tt">Целевой элемент</p>
  <p>Другой параграф</p>
</div>
<div id="movable">Перемещаемый элемент</div>

<div id="container">
  <p id="tt">Целевой элемент</p>
  <p>Другой параграф</p>
</div>
<div id="movable">Перемещаемый элемент</div>

JavaScript

const tt = document.getElementById("tt");
const movable = document.getElementById("movable");
tt.parentNode.insertBefore(movable, input__1.nextSibling);

                     const tt = document.getElementById("tt");
const movable = document.getElementById("movable");
tt.parentNode.insertBefore(movable, input__1.nextSibling);

Используйте метод `insertBefore()` вместе со свойством `nextSibling` целевого элемента.

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

Результат

Лог

Выполнить

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

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

Заменить один элемент другим

Замените элемент с id "oldElement" на элемент с id "newElement".

HTML

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

                      <div id="container">
  <p id="oldElement">Старый элемент</p>
</div>
<div id="newElement">Новый элемент</div>

<div id="container">
  <p id="oldElement">Старый элемент</p>
</div>
<div id="newElement">Новый элемент</div>

JavaScript

const oldElement = document.getElementById("oldElement");
const newElement = document.getElementById("newElement");
oldElement.input__1.replaceChild(input__2, oldElement);

                     const oldElement = document.getElementById("oldElement");
const newElement = document.getElementById("newElement");
oldElement.input__1.replaceChild(input__2, oldElement);

Используйте метод `replaceChild()` родительского элемента.

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

Результат

Лог

Выполнить

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

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

Переместить картинку в другой div

Переместите картинку с id "myImage" из div с id "sourceDiv" в div с id "ttDiv".

HTML

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

                      <div id="sourceDiv">
  <img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Картинка">
</div>
<div id="ttDiv"></div>

<div id="sourceDiv">
  <img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Картинка">
</div>
<div id="ttDiv"></div>

JavaScript

const image = document.getElementById("myImage");
const ttDiv = document.input__1("ttDiv");
ttDiv.appendChild(input__2);

                     const image = document.getElementById("myImage");
const ttDiv = document.input__1("ttDiv");
ttDiv.appendChild(input__2);

Используйте `getElementById` для получения элементов, а затем `appendChild` для перемещения.

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

Результат

Лог

Выполнить

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

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

Переместить несколько элементов

Переместите все элементы с классом "item" из div с id "source" в div с id "destination".

HTML

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

                      <div id="source">
  <p class="item">Элемент 1</p>
  <p class="item">Элемент 2</p>
  <p class="item">Элемент 3</p>
</div>
<div id="destination"></div>

<div id="source">
  <p class="item">Элемент 1</p>
  <p class="item">Элемент 2</p>
  <p class="item">Элемент 3</p>
</div>
<div id="destination"></div>

JavaScript

const items = document.querySelectorAll(".item");
const destination = document.getElementById("destination");
for (let i = 0; i < items.input__1; i++) {
  destination.appendChild(items[i]);
}

                     const items = document.querySelectorAll(".item");
const destination = document.getElementById("destination");
for (let i = 0; i < items.input__1; i++) {
  destination.appendChild(items[i]);
}

Используйте `querySelectorAll` для получения всех элементов с классом "item", затем переберите их в цикле и используйте `appendChild` для перемещения каждого элемента.

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

Результат

Лог

Выполнить

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

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

Перемещение с использованием cloneNode

Создайте копию элемента с id "original" и переместите эту копию в элемент с id "tt". Оригинальный элемент должен остаться на месте.

HTML

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

                      <div id="original">Оригинальный элемент</div>
<div id="tt"></div>

<div id="original">Оригинальный элемент</div>
<div id="tt"></div>

JavaScript

const original = document.getElementById("original");
const tt = document.getElementById("tt");
const copy = original.input__1(true);
tt.appendChild(input__2);

                     const original = document.getElementById("original");
const tt = document.getElementById("tt");
const copy = original.input__1(true);
tt.appendChild(input__2);

Используйте метод `cloneNode(true)` для создания глубокой копии элемента, а затем `appendChild` для перемещения копии.

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

Результат

Лог

Выполнить

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

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

Перемещение элемента на основе условия

Переместите элемент с id "moveMe" в div с id "tt1", если его текстовое содержимое равно "Переместить", иначе переместите его в div с id "tt2".

HTML

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

                      <div id="moveMe">Переместить</div>
<div id="tt1"></div>
<div id="tt2"></div>

<div id="moveMe">Переместить</div>
<div id="tt1"></div>
<div id="tt2"></div>

JavaScript

const moveMe = document.getElementById("moveMe");
const tt1 = document.getElementById("tt1");
const tt2 = document.getElementById("tt2");

if (moveMe.textContent input__1 "Переместить") {
  tt1.appendChild(moveMe);
} else {
  input__2.appendChild(moveMe);
}

                     const moveMe = document.getElementById("moveMe");
const tt1 = document.getElementById("tt1");
const tt2 = document.getElementById("tt2");

if (moveMe.textContent input__1 "Переместить") {
  tt1.appendChild(moveMe);
} else {
  input__2.appendChild(moveMe);
}

Используйте `textContent` для проверки содержимого элемента и условный оператор `if/else` для выбора целевого элемента.

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

Результат

Лог

Выполнить

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

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

Перемещение элемента и изменение его атрибутов

Переместите элемент с id "imageToMove" в div с id "newLocation" и измените его атрибут src на другое изображение.

HTML

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

                      <div id="oldLocation">
 <img id="imageToMove" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Старая картинка">
</div>
<div id="newLocation"></div>

<div id="oldLocation">
 <img id="imageToMove" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Старая картинка">
</div>
<div id="newLocation"></div>

JavaScript

const image = document.getElementById("imageToMove");
const newLocation = document.getElementById("newLocation");
newLocation.appendChild(image);
image.input__1('src', 'https://naytikurs.ru/assets/uploads/2025/03/test-na-znanie-osnov-kiberbezopasnosti-300x300.png');

                     const image = document.getElementById("imageToMove");
const newLocation = document.getElementById("newLocation");
newLocation.appendChild(image);
image.input__1('src', 'https://naytikurs.ru/assets/uploads/2025/03/test-na-znanie-osnov-kiberbezopasnosti-300x300.png');

Используйте `appendChild` для перемещения и `setAttribute` для изменения атрибута.

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

Результат

Лог

Выполнить

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

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