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

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

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

Список тем

Простое клонирование абзаца

Клонируйте абзац с текстом "Исходный абзац" и добавьте клонированный абзац в конец блока с id "container".

HTML

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

                      <div id="container">
  <p id="originalParagraph">Исходный абзац</p>
</div>

<div id="container">
  <p id="originalParagraph">Исходный абзац</p>
</div>

JavaScript

let originalParagraph = document.input__1("originalParagraph");
let clonedParagraph = originalParagraph.input__2(true);
document.input__3("container").input__4(clonedParagraph);

                     let originalParagraph = document.input__1("originalParagraph");
let clonedParagraph = originalParagraph.input__2(true);
document.input__3("container").input__4(clonedParagraph);

Для клонирования элемента используйте метод `cloneNode()`. По умолчанию, при клонировании без аргументов или с аргументом `false`, клонируется только сам элемент, без дочерних элементов (поверхностное клонирование). Чтобы клонировать элемент вместе со всем его содержимым, используйте `cloneNode(true)` (глубокое клонирование). Для добавления элемента в конец другого элемента используйте метод `appendChild()`

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

Результат

Лог

Выполнить

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

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

Клонирование списка элементов

Клонируйте список ul с 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

let originalList = document.input__1("list");
let clonedList = originalList.input__2(true);
originalList.input__3(clonedList);

                     let originalList = document.input__1("list");
let clonedList = originalList.input__2(true);
originalList.input__3(clonedList);

Аналогично предыдущему заданию, используйте `cloneNode(true)` для глубокого клонирования списка и `after()` для вставки клона после исходного элемента.

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

Результат

Лог

Выполнить

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

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

Клонирование и изменение текста

Клонируйте абзац с id "textParagraph", измените текст клонированного абзаца на "Клонированный текст" и добавьте его в div с id "output".

HTML

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

                      <div id="output"></div>
<p id="textParagraph">Исходный текст</p>

<div id="output"></div>
<p id="textParagraph">Исходный текст</p>

JavaScript

let originalParagraph = document.input__1("textParagraph");
let clonedParagraph = originalParagraph.input__2(true);
clonedParagraph.input__3 = "Клонированный текст";
document.input__4("output").input__5(clonedParagraph);

                     let originalParagraph = document.input__1("textParagraph");
let clonedParagraph = originalParagraph.input__2(true);
clonedParagraph.input__3 = "Клонированный текст";
document.input__4("output").input__5(clonedParagraph);

После клонирования элемента, вы можете изменять свойства клонированного элемента, не затрагивая оригинал. Используйте `textContent` для изменения текста.

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

Результат

Лог

Выполнить

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

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

Клонирование с изменением атрибута

Клонируйте изображение с id "image", измените атрибут src клонированного изображения на "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png" и добавьте его в div с id "imageOutput".

HTML

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

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

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

JavaScript

let originalImage = document.input__1("image");
let clonedImage = originalImage.input__2(true);
clonedImage.input__3("src", "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png");
document.input__4("imageOutput").input__5(clonedImage);

                     let originalImage = document.input__1("image");
let clonedImage = originalImage.input__2(true);
clonedImage.input__3("src", "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png");
document.input__4("imageOutput").input__5(clonedImage);

Для изменения атрибутов элемента используйте метод `setAttribute()`. Первый аргумент - имя атрибута, второй - новое значение.

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

Результат

Лог

Выполнить

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

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

Клонирование и вставка в начало

Клонируйте первый элемент списка ul с id "itemsList" и вставьте клонированный элемент в начало этого же списка.

HTML

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

                      <ul id="itemsList">
  <li class="item">Элемент 1</li>
  <li class="item">Элемент 2</li>
</ul>

<ul id="itemsList">
  <li class="item">Элемент 1</li>
  <li class="item">Элемент 2</li>
</ul>

JavaScript

let list = document.input__1("itemsList");
let firstItem = list.input__2[0];
let clonedItem = firstItem.input__3(true);
list.input__4(clonedItem);

                     let list = document.input__1("itemsList");
let firstItem = list.input__2[0];
let clonedItem = firstItem.input__3(true);
list.input__4(clonedItem);

Для вставки элемента в начало другого элемента используйте метод `prepend()`. Чтобы получить первый элемент коллекции `children`, можно использовать `children[0]`.

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

Результат

Лог

Выполнить

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

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

Клонирование с изменением класса

Клонируйте кнопку с id "button", добавьте клонированной кнопке класс "cloned-button" и вставьте ее после исходной кнопки.

CSS

.cloned-button {
  background-color: lightgreen;
}

HTML

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

                      <button id="button">Исходная кнопка</button>

<button id="button">Исходная кнопка</button>

JavaScript

let originalButton = document.input__1("button");
let clonedButton = originalButton.input__2(true);
clonedButton.classList.input__3("cloned-button");
originalButton.input__4(clonedButton);

                     let originalButton = document.input__1("button");
let clonedButton = originalButton.input__2(true);
clonedButton.classList.input__3("cloned-button");
originalButton.input__4(clonedButton);

Для добавления класса элементу используйте свойство `classList.add()`. Для вставки элемента после другого элемента используйте метод `after()`.

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

Результат

Лог

Выполнить

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

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

Клонирование группы элементов

Клонируйте div с id "card", который содержит заголовок и абзац, и добавьте три клонированных div в div с id "cardsContainer".

CSS

.card {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

HTML

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

                      <div id="cardsContainer"></div>
<div id="card" class="card">
  <h3>Заголовок карточки</h3>
  <p>Текст карточки.</p>
</div>

<div id="cardsContainer"></div>
<div id="card" class="card">
  <h3>Заголовок карточки</h3>
  <p>Текст карточки.</p>
</div>

JavaScript

let originalCard = document.input__1("card");
let cardsContainer = document.input__2("cardsContainer");
for (let i = 0; i < input__3; i++) {
  let clonedCard = originalCard.input__4(true);
  cardsContainer.input__5(clonedCard);
}

                     let originalCard = document.input__1("card");
let cardsContainer = document.input__2("cardsContainer");
for (let i = 0; i < input__3; i++) {
  let clonedCard = originalCard.input__4(true);
  cardsContainer.input__5(clonedCard);
}

Используйте цикл `for` для создания нескольких клонов и `appendChild()` для добавления каждого клона в контейнер.

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

Результат

Лог

Выполнить

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

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

Клонирование и удаление класса у оригинала

Клонируйте div с id "removable", добавьте клону класс "cloned", а у оригинального div удалите класс "highlight".

CSS

.highlight {
  background-color: yellow;
}
.cloned {
  border: 2px solid blue;
}

HTML

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

                      <div id="removable" class="highlight">Элемент для клонирования</div>
<div id="outputContainer"></div>

<div id="removable" class="highlight">Элемент для клонирования</div>
<div id="outputContainer"></div>

JavaScript

let originalElement = document.input__1("removable");
let clonedElement = originalElement.input__2(true);
clonedElement.classList.input__3("cloned");
originalElement.classList.input__4("highlight");
document.input__5("outputContainer").input__6(clonedElement);

                     let originalElement = document.input__1("removable");
let clonedElement = originalElement.input__2(true);
clonedElement.classList.input__3("cloned");
originalElement.classList.input__4("highlight");
document.input__5("outputContainer").input__6(clonedElement);

Для удаления класса используйте `classList.remove()`. Классы можно добавлять и удалять независимо у оригинала и клона.

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

Результат

Лог

Выполнить

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

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