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

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

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

Список тем

Создание простого параграфа

Создайте новый элемент параграфа (`<p>`) и добавьте в него текст "Это новый параграф". Затем добавьте этот параграф в конец элемента `body`.

HTML

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

JavaScript

let newParagraph = document.input__1('p');
newParagraph.input__2 = "Это новый параграф";
document.input__3.input__4(newParagraph);

                     let newParagraph = document.input__1('p');
newParagraph.input__2 = "Это новый параграф";
document.input__3.input__4(newParagraph);

Для создания нового элемента используйте метод `createElement()`. Чтобы добавить текст в элемент, используйте свойство `textContent`. Для добавления элемента в `body` используйте метод `appendChild()` у элемента `body`, который можно получить через `document.body`.

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

Результат

Лог

Выполнить

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

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

Создание заголовка H2 в div

Создайте новый элемент заголовка второго уровня (`<h2>`) с текстом "Заголовок H2". Найдите элемент `div` с `id="container"` и добавьте созданный заголовок внутрь этого `div`.

HTML

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

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

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

JavaScript

let newHeading = document.input__1('h2');
newHeading.input__2 = "Заголовок H2";
let container = document.input__3('container');
container.input__4(newHeading);

                     let newHeading = document.input__1('h2');
newHeading.input__2 = "Заголовок H2";
let container = document.input__3('container');
container.input__4(newHeading);

Аналогично предыдущему заданию, используйте `createElement()` для создания `<h2>`. Для добавления текста используйте `textContent`. Чтобы найти `div` по `id`, используйте `getElementById()`. Используйте `appendChild()` для добавления заголовка в `div`.

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

Результат

Лог

Выполнить

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

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

Создание списка элементов

Создайте новый неупорядоченный список (`<ul>`). Затем создайте три элемента списка (`<li>`) с текстами "Пункт 1", "Пункт 2", "Пункт 3" соответственно. Добавьте каждый элемент списка в созданный список `<ul>`. И в конце добавьте список `<ul>` в элемент `div` с `id="list-container"`.

HTML

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

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

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

JavaScript

let newList = document.input__1('ul');
for (let i = 1; i <= 3; i++) {
  let listItem = document.input__2('li');
  listItem.input__3 = `Пункт ${i}`;
  newList.input__4(listItem);
}
let listContainer = document.input__5('list-container');
listContainer.input__6(newList);

                     let newList = document.input__1('ul');
for (let i = 1; i <= 3; i++) {
  let listItem = document.input__2('li');
  listItem.input__3 = `Пункт ${i}`;
  newList.input__4(listItem);
}
let listContainer = document.input__5('list-container');
listContainer.input__6(newList);

Создайте `<ul>` и три `<li>` элемента, используя `createElement()`. Установите `textContent` для каждого `<li>`. Используйте `appendChild()` для добавления `<li>` в `<ul>`, а затем `<ul>` в `div#list-container`.

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

Результат

Лог

Выполнить

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

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

Создание изображения

Создайте новый элемент изображения (`<img>`). Установите атрибут `src` на URL изображения: "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png". Установите атрибут `alt` на "3D моделирование". Добавьте изображение в элемент `div` с `id="image-container"`.

HTML

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

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

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

JavaScript

let newImage = document.input__1('img');
newImage.input__2('src', 'https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png');
newImage.input__3('alt', '3D моделирование');
let imageContainer = document.input__4('image-container');
imageContainer.input__5(newImage);

                     let newImage = document.input__1('img');
newImage.input__2('src', 'https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png');
newImage.input__3('alt', '3D моделирование');
let imageContainer = document.input__4('image-container');
imageContainer.input__5(newImage);

Создайте `<img>` элемент с помощью `createElement()`. Используйте `setAttribute()` для установки атрибутов `src` и `alt`. Найдите `div#image-container` через `getElementById()` и добавьте изображение с помощью `appendChild()`.

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

Результат

Лог

Выполнить

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

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

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

Создайте новый элемент кнопки (`<button>`) с текстом "Нажми меня!". Добавьте кнопке класс "primary-button". Добавьте кнопку в элемент `div` с `id="button-container"`.

HTML

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

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

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

JavaScript

let newButton = document.input__1('button');
newButton.input__2 = "Нажми меня!";
newButton.classList.input__3('primary-button');
let buttonContainer = document.input__4('button-container');
buttonContainer.input__5(newButton);

                     let newButton = document.input__1('button');
newButton.input__2 = "Нажми меня!";
newButton.classList.input__3('primary-button');
let buttonContainer = document.input__4('button-container');
buttonContainer.input__5(newButton);

Создайте `<button>` элемент с помощью `createElement()`. Установите `textContent` для текста кнопки. Используйте свойство `classList.add()` для добавления класса. Найдите `div#button-container` и добавьте кнопку с помощью `appendChild()`.

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

Результат

Лог

Выполнить

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

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

Создание элемента с разными атрибутами

Создайте новый элемент ссылки (`<a>`). Установите атрибут `href` на "https://www.example.com". Установите атрибут `target` на "_blank". Установите текст ссылки "Перейти на Example". Добавьте ссылку в элемент `div` с `id="link-container"`.

HTML

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

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

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

JavaScript

let newLink = document.input__1('a');
newLink.input__2('href', 'https://www.example.com');
newLink.input__3('target', '_blank');
newLink.input__4 = "Перейти на Example";
let linkContainer = document.input__5('link-container');
linkContainer.input__6(newLink);

                     let newLink = document.input__1('a');
newLink.input__2('href', 'https://www.example.com');
newLink.input__3('target', '_blank');
newLink.input__4 = "Перейти на Example";
let linkContainer = document.input__5('link-container');
linkContainer.input__6(newLink);

Создайте `<a>` элемент. Используйте `setAttribute()` для установки атрибутов `href` и `target`. Установите `textContent` для текста ссылки. Найдите `div#link-container` и добавьте ссылку.

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

Результат

Лог

Выполнить

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

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

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

Создайте новый параграф (`<p>`) с текстом "Вставленный параграф". Найдите элемент `div` с `id="existing-paragraph"`. Вставьте созданный параграф **перед** элементом `div` с `id="existing-paragraph"` в родительском элементе.

HTML

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

                      <div id="parent-container">
  <div id="existing-paragraph">Существующий параграф</div>
</div>

<div id="parent-container">
  <div id="existing-paragraph">Существующий параграф</div>
</div>

JavaScript

let newParagraph = document.input__1('p');
newParagraph.input__2 = "Вставленный параграф";
let existingParagraph = document.input__3('existing-paragraph');
let parent = existingParagraph.input__4;
parent.input__5(newParagraph, existingParagraph);

                     let newParagraph = document.input__1('p');
newParagraph.input__2 = "Вставленный параграф";
let existingParagraph = document.input__3('existing-paragraph');
let parent = existingParagraph.input__4;
parent.input__5(newParagraph, existingParagraph);

Создайте `<p>` элемент. Найдите родительский элемент для `div#existing-paragraph` с помощью `parentNode`. Найдите сам `div#existing-paragraph` с помощью `getElementById()`. Используйте метод `insertBefore()` у родительского элемента, передав новый параграф и элемент, перед которым нужно вставить.

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

Результат

Лог

Выполнить

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

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

Динамическое создание элементов в цикле

Создайте 5 новых элементов параграфа (`<p>`) в цикле. Для каждого параграфа установите текст "Параграф №i", где i - номер итерации цикла (от 1 до 5). Добавьте все созданные параграфы в элемент `div` с `id="loop-container"`.

HTML

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

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

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

JavaScript

let container = document.input__1('loop-container');
for (let i = 1; i <= input__2; i++) {
  let paragraph = document.input__3('p');
  paragraph.input__4 = `Параграф №${i}`;
  container.input__5(paragraph);
}

                     let container = document.input__1('loop-container');
for (let i = 1; i <= input__2; i++) {
  let paragraph = document.input__3('p');
  paragraph.input__4 = `Параграф №${i}`;
  container.input__5(paragraph);
}

Используйте цикл `for` для создания 5 параграфов. Внутри цикла создавайте `<p>` элементы с помощью `createElement()`. Установите `textContent` для каждого параграфа, используя шаблонные литералы для вставки номера итерации. Найдите `div#loop-container` и добавляйте каждый параграф в него с помощью `appendChild()`.

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

Результат

Лог

Выполнить

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

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