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

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

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

Список тем

Замена простого текста

Замените текст внутри абзаца `<p>` с идентификатором "myParagraph" на новый текст "Это новый текст!". Используйте подходящий метод JavaScript для доступа к элементу и изменения его содержимого.

HTML

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

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

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

JavaScript

document.input__1("myParagraph").input__2 = "Это новый текст!";

                     document.input__1("myParagraph").input__2 = "Это новый текст!";

Используйте `document.getElementById()` для получения элемента по ID, а затем свойство `textContent` для изменения текстового содержимого элемента.

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

Результат

Лог

Выполнить

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

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

Замена изображения

Замените изображение с идентификатором "myImage" на новое изображение. Используйте другую картинку из предложенных URL.

HTML

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

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

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

JavaScript

document.getElementById("myImage").input__1 = "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png";

                     document.getElementById("myImage").input__1 = "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png";

Используйте `document.getElementById()` для получения элемента изображения по ID, а затем свойство `src` для изменения атрибута `src` элемента `<img>`.

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

Результат

Лог

Выполнить

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

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

Замена элемента div на span

Замените элемент `<div>` с идентификатором "myDiv" на новый элемент `<span>` с текстом "Это новый span!".

HTML

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

                      <div id="myDiv">Это старый div</div>

<div id="myDiv">Это старый div</div>

JavaScript

let newSpan = document.input__1('span');
newSpan.input__2 = "Это новый span!";
let oldDiv = document.getElementById("myDiv");
let parent = oldDiv.input__3;
parent.input__4(newSpan, input__5);

                     let newSpan = document.input__1('span');
newSpan.input__2 = "Это новый span!";
let oldDiv = document.getElementById("myDiv");
let parent = oldDiv.input__3;
parent.input__4(newSpan, input__5);

Создайте новый элемент `<span>` с помощью `document.createElement()`. Затем используйте `document.getElementById()` чтобы получить ссылку на `<div>`, получите родительский элемент `<div>` с помощью `parentNode`, и используйте `replaceChild()` для замены `<div>` на `<span>`.

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

Результат

Лог

Выполнить

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

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

Замена элемента списка

Замените второй элемент списка (`<li>`) в неупорядоченном списке (`<ul>`) с идентификатором "myList" на новый элемент списка с текстом "Новый элемент списка".

HTML

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

                      <ul id="myList">
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ul>

<ul id="myList">
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ul>

JavaScript

let newList = document.getElementById("myList");
let newItem = document.input__1("li");
newItem.textContent = "Новый элемент списка";
let oldItem = newList.input__2input__3;
newList.replaceChild(newItem, oldItem);

                     let newList = document.getElementById("myList");
let newItem = document.input__1("li");
newItem.textContent = "Новый элемент списка";
let oldItem = newList.input__2input__3;
newList.replaceChild(newItem, oldItem);

Используйте `document.getElementById()` для получения `<ul>`. Затем используйте `children` или `querySelector()` для доступа ко второму `<li>`. Создайте новый `<li>` с помощью `document.createElement()`. Используйте `replaceChild()` для замены старого `<li>` на новый.

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

Результат

Лог

Выполнить

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

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

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

Замените все элементы `<p>` внутри `<div>` с идентификатором "container" на элементы `<h1>` с тем же текстом.

HTML

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

                      <div id="container">
  <p>Параграф 1</p>
  <p>Параграф 2</p>
  <p>Параграф 3</p>
</div>

<div id="container">
  <p>Параграф 1</p>
  <p>Параграф 2</p>
  <p>Параграф 3</p>
</div>

JavaScript

let container = document.getElementById("container");
let paragraphs = container.input__1('p');
for (let i = 0; i < paragraphs.length; i++) {
  let newHeading = document.input__2('h1');
  newHeading.textContent = paragraphs[i].input__3;
  paragraphs[i].parentNode.replaceChild(newHeading, paragraphs[i]);
}

                     let container = document.getElementById("container");
let paragraphs = container.input__1('p');
for (let i = 0; i < paragraphs.length; i++) {
  let newHeading = document.input__2('h1');
  newHeading.textContent = paragraphs[i].input__3;
  paragraphs[i].parentNode.replaceChild(newHeading, paragraphs[i]);
}

Используйте `document.getElementById()` для получения `<div>`. Затем используйте `querySelectorAll('p')` для получения всех `<p>` внутри `<div>`. Переберите полученную коллекцию в цикле. Внутри цикла создавайте новый `<h1>` с помощью `document.createElement()`, копируйте текст из текущего `<p>` в `<h1>`, и заменяйте `<p>` на `<h1>` с помощью `replaceChild()`.

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

Результат

Лог

Выполнить

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

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

Замена атрибута class

Замените класс "old-class" у элемента с идентификатором "myElement" на класс "new-class".

CSS

.old-class { color: red; }
.new-class { color: blue; }

HTML

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

                      <div id="myElement" class="old-class">Этот текст должен стать синим</div>

<div id="myElement" class="old-class">Этот текст должен стать синим</div>

JavaScript

document.getElementById("myElement").input__1 = "new-class";

                     document.getElementById("myElement").input__1 = "new-class";

Используйте `document.getElementById()` для получения элемента. Затем используйте свойство `className` для полной замены списка классов.

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

Результат

Лог

Выполнить

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

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

Замена с использованием innerHTML

Замените всё содержимое элемента с id="container" на новый HTML-код: `<p>Новый параграф</p>`.

HTML

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

                      <div id="container">
  <p>Старый параграф</p>
  <span>Старый span</span>
</div>

<div id="container">
  <p>Старый параграф</p>
  <span>Старый span</span>
</div>

JavaScript

document.getElementById("container").input__1 = "<p>Новый параграф</p>";

                     document.getElementById("container").input__1 = "<p>Новый параграф</p>";

Используйте `document.getElementById()` для получения элемента, а затем свойство `innerHTML` для замены всего его содержимого.

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

Результат

Лог

Выполнить

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

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

Замена элемента с сохранением обработчиков

Замените кнопку с id="myButton" на новую кнопку с тем же текстом и обработчиком события `click`. Обработчик должен выводить сообщение "Клик!" в консоль.

HTML

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

                      <button id="myButton">Нажми меня</button>

<button id="myButton">Нажми меня</button>

JavaScript

let newButton = document.createElement('button');
newButton.textContent = "Нажми меня";
newButton.input__1('click', function() {
  console.log('Клик!');
});
let oldButton = document.getElementById('myButton');
oldButton.parentNode.replaceChild(newButton, oldButton);

                     let newButton = document.createElement('button');
newButton.textContent = "Нажми меня";
newButton.input__1('click', function() {
  console.log('Клик!');
});
let oldButton = document.getElementById('myButton');
oldButton.parentNode.replaceChild(newButton, oldButton);

Создайте новую кнопку с помощью `document.createElement()`. Установите текст кнопки. Добавьте обработчик события `click` с помощью `addEventListener()`. Получите старую кнопку по ID. Используйте `replaceChild()` для замены.

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

Результат

Лог

Выполнить

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

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

Замена содержимого таблицы

Замените содержимое ячейки таблицы (второй строки, второй ячейки) в таблице с id="myTable" на текст "Новые данные".

HTML

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

                      <table id="myTable">
  <tr>
    <td>Ячейка 1,1</td>
    <td>Ячейка 1,2</td>
  </tr>
  <tr>
    <td>Ячейка 2,1</td>
    <td>Ячейка 2,2</td>
  </tr>
</table>

<table id="myTable">
  <tr>
    <td>Ячейка 1,1</td>
    <td>Ячейка 1,2</td>
  </tr>
  <tr>
    <td>Ячейка 2,1</td>
    <td>Ячейка 2,2</td>
  </tr>
</table>

JavaScript

let table = document.getElementById("myTable");
let cell = table.rows[input__1].cells[input__2];
cell.textContent = "Новые данные";

                     let table = document.getElementById("myTable");
let cell = table.rows[input__1].cells[input__2];
cell.textContent = "Новые данные";

Используйте `document.getElementById()` для получения таблицы. Используйте `rows` для доступа к строкам, а затем `cells` для доступа к ячейкам. Используйте `textContent` для изменения текста в ячейке.

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

Результат

Лог

Выполнить

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

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