Динамическое добавление/удаление полей формы: Тренажер JavaScript: Покоряем HTML DOM

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

В этом тренажере вы попрактикуетесь в динамическом создании и удалении элементов формы с помощью JavaScript. Вы будете работать с различными HTML-элементами, такими как `<input>`, `<textarea>`, `<select>`, `<button>`, и контейнерами (`<div>`). Вам предстоит добавлять новые поля, удалять существующие, а также изменять их атрибуты и содержимое, реагируя на действия пользователя (например, нажатие кнопки). Каждое задание представляет собой фрагмент HTML и JavaScript кода с пропусками, которые вам нужно заполнить, чтобы добиться желаемого результата.

Список тем

Добавление текстового поля

Добавьте текстовое поле (`<input type="text">`) внутрь `<div>` с идентификатором "container" после нажатия на кнопку "Добавить". Поле должно появляться при каждом нажатии.

HTML

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

                      <button id="addButton">Добавить</button>
<div id="container"></div>

<button id="addButton">Добавить</button>
<div id="container"></div>

JavaScript

document.getElementById("addButton").addEventListener("click", function() {
  let input = document.input__1("input");
  input.input__2 = "text";
  document.getElementById("container").input__3(input);
});

                     document.getElementById("addButton").addEventListener("click", function() {
  let input = document.input__1("input");
  input.input__2 = "text";
  document.getElementById("container").input__3(input);
});

Используйте `document.createElement` для создания нового элемента `<input>`. Затем используйте `appendChild` для добавления созданного элемента внутрь элемента `<div>` с id "container". Не забудьте установить атрибут `type` в значение "text".

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

Результат

Лог

Выполнить

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

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

Удаление последнего поля

Добавьте несколько текстовых полей, используя кнопку "Добавить". Затем реализуйте удаление последнего добавленного поля при нажатии на кнопку "Удалить".

HTML

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

                      <button id="addButton">Добавить</button>
<button id="removeButton">Удалить</button>
<div id="container"></div>

<button id="addButton">Добавить</button>
<button id="removeButton">Удалить</button>
<div id="container"></div>

JavaScript

document.getElementById("addButton").addEventListener("click", function() {
  let input = document.createElement("input");
  input.type = "text";
  document.getElementById("container").appendChild(input);
});

document.getElementById("removeButton").addEventListener("click", function() {
  let container = document.getElementById("container");
  let lastInput = container.querySelector("input:input__1");
  if (lastInput) {
    lastInput.input__2();
  }
});

                     document.getElementById("addButton").addEventListener("click", function() {
  let input = document.createElement("input");
  input.type = "text";
  document.getElementById("container").appendChild(input);
});

document.getElementById("removeButton").addEventListener("click", function() {
  let container = document.getElementById("container");
  let lastInput = container.querySelector("input:input__1");
  if (lastInput) {
    lastInput.input__2();
  }
});

Используйте `querySelector` и `:last-child` чтобы найти последний `<input>` внутри "container". Затем используйте `remove()` для удаления найденного элемента.

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

Результат

Лог

Выполнить

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

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

Добавление поля с номером

Добавляйте текстовые поля с порядковым номером при каждом нажатии на кнопку "Добавить". Например: "Поле 1", "Поле 2", и т.д.

HTML

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

                      <button id="addButton">Добавить</button>
<div id="container"></div>

<button id="addButton">Добавить</button>
<div id="container"></div>

JavaScript

let count = 0;
document.getElementById("addButton").addEventListener("click", function() {
  count++;
  let label = document.createElement("label");
  label.textContent = "Поле " + input__1 + ": ";
  let input = document.createElement("input");
  input.type = "text";
  let br = document.createElement("br"); 
 document.getElementById("container").appendChild(input__2);
  document.getElementById("container").appendChild(input);
  document.getElementById("container").appendChild(br);
});

                     let count = 0;
document.getElementById("addButton").addEventListener("click", function() {
  count++;
  let label = document.createElement("label");
  label.textContent = "Поле " + input__1 + ": ";
  let input = document.createElement("input");
  input.type = "text";
  let br = document.createElement("br"); 
 document.getElementById("container").appendChild(input__2);
  document.getElementById("container").appendChild(input);
  document.getElementById("container").appendChild(br);
});

Используйте переменную для отслеживания количества добавленных полей. При создании нового поля, увеличивайте значение переменной и используйте его для формирования текста внутри `<label>`.

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

Результат

Лог

Выполнить

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

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

Добавление выпадающего списка

Добавьте выпадающий список (`<select>`) с тремя опциями ("Вариант 1", "Вариант 2", "Вариант 3") внутрь `<div>` с id "container" при нажатии на кнопку.

HTML

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

                      <button id="addButton">Добавить select</button>
<div id="container"></div>

<button id="addButton">Добавить select</button>
<div id="container"></div>

JavaScript

document.getElementById("addButton").addEventListener("click", function() {
  let select = document.createElement(input__1);
  let option1 = document.createElement("option");
  option1.value = "1";
  option1.textContent = "Вариант 1";
  let option2 = document.createElement("option");
  option2.input__2 = "2";
  option2.textContent = "Вариант 2";
  let option3 = document.createElement("option");
  option3.value = "3";
  option3.textContent = "Вариант 3";
  select.appendChild(option1);
  select.appendChild(option2);
  select.appendChild(option3);
  document.getElementById("container").appendChild(input__3);
});

                     document.getElementById("addButton").addEventListener("click", function() {
  let select = document.createElement(input__1);
  let option1 = document.createElement("option");
  option1.value = "1";
  option1.textContent = "Вариант 1";
  let option2 = document.createElement("option");
  option2.input__2 = "2";
  option2.textContent = "Вариант 2";
  let option3 = document.createElement("option");
  option3.value = "3";
  option3.textContent = "Вариант 3";
  select.appendChild(option1);
  select.appendChild(option2);
  select.appendChild(option3);
  document.getElementById("container").appendChild(input__3);
});

Создайте элемент `<select>` с помощью `createElement`. Затем создайте три элемента `<option>` и добавьте их внутрь `<select>`. Наконец, добавьте `<select>` в "container".

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

Результат

Лог

Выполнить

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

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

Удаление определенного поля

Добавьте несколько текстовых полей с кнопками "Удалить" рядом с каждым полем. При нажатии на кнопку "Удалить", должно удаляться соответствующее поле.

CSS

.input-group { margin-bottom: 5px; }

HTML

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

                      <button id="addButton">Добавить поле с кнопкой удаления</button>
<div id="container"></div>

<button id="addButton">Добавить поле с кнопкой удаления</button>
<div id="container"></div>

JavaScript

document.getElementById("addButton").addEventListener("click", function() {
  let inputGroup = document.createElement("div");
  inputGroup.className = "input-group";
  let input = document.createElement("input");
  input.type = "text";
  let button = document.createElement("button");
  button.textContent = "Удалить";
  button.addEventListener("click", function() {
    input__1.parentNode.remove();
  });
  inputGroup.appendChild(input);
  inputGroup.appendChild(button);
  document.getElementById("container").appendChild(inputGroup);
});

                     document.getElementById("addButton").addEventListener("click", function() {
  let inputGroup = document.createElement("div");
  inputGroup.className = "input-group";
  let input = document.createElement("input");
  input.type = "text";
  let button = document.createElement("button");
  button.textContent = "Удалить";
  button.addEventListener("click", function() {
    input__1.parentNode.remove();
  });
  inputGroup.appendChild(input);
  inputGroup.appendChild(button);
  document.getElementById("container").appendChild(inputGroup);
});

При создании поля и кнопки, добавьте кнопке обработчик события `click`. Внутри обработчика используйте `parentNode` и `remove()` чтобы удалить родительский элемент кнопки (который будет содержать и поле, и кнопку).

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

Результат

Лог

Выполнить

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

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

Добавление изображения

Добавьте изображение внутрь `<div>` с id "container" при нажатии на кнопку. Используйте одну из картинок, указанных в условии.

HTML

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

                      <button id="addImageButton">Добавить изображение</button>
<div id="container"></div>

<button id="addImageButton">Добавить изображение</button>
<div id="container"></div>

JavaScript

document.getElementById("addImageButton").addEventListener("click", function() {
  let img = document.createElement(input__1);
  img.src = "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png";
  document.getElementById("container").input__2(img);
});

                     document.getElementById("addImageButton").addEventListener("click", function() {
  let img = document.createElement(input__1);
  img.src = "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png";
  document.getElementById("container").input__2(img);
});

Создайте элемент `<img>` с помощью `document.createElement`. Установите атрибут `src` равным URL изображения. Затем добавьте изображение в "container".

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

Результат

Лог

Выполнить

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

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

Добавление и очистка поля textarea

Добавьте поле `<textarea>` внутрь `<div>` с id "container" при нажатии на кнопку "Добавить". Затем добавьте кнопку "Очистить", которая будет очищать содержимое `<textarea>`.

HTML

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

                      <button id="addButton">Добавить textarea</button>
<button id="clearButton">Очистить</button>
<div id="container"></div>

<button id="addButton">Добавить textarea</button>
<button id="clearButton">Очистить</button>
<div id="container"></div>

JavaScript

document.getElementById("addButton").addEventListener("click", function() {
  let textarea = document.createElement(input__1);
  document.getElementById("container").appendChild(textarea);
});

document.getElementById("clearButton").addEventListener("click", function() {
  let textarea = document.querySelector("textarea");
    textarea.input__2 = "";
});

                     document.getElementById("addButton").addEventListener("click", function() {
  let textarea = document.createElement(input__1);
  document.getElementById("container").appendChild(textarea);
});

document.getElementById("clearButton").addEventListener("click", function() {
  let textarea = document.querySelector("textarea");
    textarea.input__2 = "";
});

Создайте элемент `<textarea>` и добавьте его в "container". Для очистки, найдите `<textarea>` и установите его свойство `value` в пустую строку.

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

Результат

Лог

Выполнить

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

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

Добавление клонированного поля

Создайте текстовое поле с начальным значением. При нажатии на кнопку "Клонировать", создайте копию этого поля и добавьте её в "container".

HTML

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

                      <input type="text" id="originalInput" value="Исходное поле">
<button id="cloneButton">Клонировать</button>
<div id="container"></div>

<input type="text" id="originalInput" value="Исходное поле">
<button id="cloneButton">Клонировать</button>
<div id="container"></div>

JavaScript

document.getElementById("cloneButton").addEventListener("click", function() {
  let originalInput = document.getElementById("originalInput");
  let clonedInput = originalInput.input__1(input__2);
  document.getElementById("container").appendChild(clonedInput);
});

                     document.getElementById("cloneButton").addEventListener("click", function() {
  let originalInput = document.getElementById("originalInput");
  let clonedInput = originalInput.input__1(input__2);
  document.getElementById("container").appendChild(clonedInput);
});

Используйте `cloneNode(true)` для создания глубокой копии элемента, включая его атрибуты и содержимое. Затем добавьте клонированный элемент в "container".

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

Результат

Лог

Выполнить

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

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

Добавление нескольких типов полей

Добавьте выпадающий список (`<select>`) с опциями, представляющими разные типы полей: "text", "number", "email", "password". При выборе типа поля и нажатии на кнопку "Добавить", должно добавляться поле соответствующего типа.

HTML

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

                      <select id="fieldType">
  <option value="text">Text</option>
  <option value="number">Number</option>
  <option value="email">Email</option>
  <option value="password">Password</option>
</select>
<button id="addButton">Добавить</button>
<div id="container"></div>

<select id="fieldType">
  <option value="text">Text</option>
  <option value="number">Number</option>
  <option value="email">Email</option>
  <option value="password">Password</option>
</select>
<button id="addButton">Добавить</button>
<div id="container"></div>

JavaScript

document.getElementById("addButton").addEventListener("click", function() {
  let fieldType = document.getElementById("fieldType").input__1;
  let input = document.createElement("input");
  input.type = input__2;
  document.getElementById("container").appendChild(input);
});

                     document.getElementById("addButton").addEventListener("click", function() {
  let fieldType = document.getElementById("fieldType").input__1;
  let input = document.createElement("input");
  input.type = input__2;
  document.getElementById("container").appendChild(input);
});

Создайте `<select>` с опциями. В обработчике кнопки "Добавить", получайте выбранное значение из `<select>` и используйте его как значение атрибута `type` для нового `<input>`.

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

Результат

Лог

Выполнить

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

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