Очистка содержимого элемента без его удаления: Тренажер JavaScript: Покоряем HTML DOM

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

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

Список тем

Очистка текстового содержимого

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

HTML

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

                      <p id="myParagraph">Этот текст нужно удалить</p>

<p id="myParagraph">Этот текст нужно удалить</p>

JavaScript

document.getElementById("myParagraph").input__1 = input__2;

                     document.getElementById("myParagraph").input__1 = input__2;

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

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

Результат

Лог

Выполнить

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

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

Очистка содержимого div

Имеется div, содержащий несколько дочерних элементов (абзацы и изображение). Очистите содержимое этого div, чтобы все дочерние элементы были удалены, но сам div остался.

HTML

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

                      <div id="myDiv">
  <p>Первый абзац</p>
  <img src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Картинка">
  <p>Второй абзац</p>
</div>

<div id="myDiv">
  <p>Первый абзац</p>
  <img src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Картинка">
  <p>Второй абзац</p>
</div>

JavaScript

document.getElementById(input__1).innerHTML = input__2;

                     document.getElementById(input__1).innerHTML = input__2;

Можно использовать свойство `innerHTML`, присвоив ему пустую строку. Это удалит всех потомков элемента.

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

Результат

Лог

Выполнить

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

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

Очистка списка

Дан неупорядоченный список (ul) с несколькими элементами списка (li). Удалите все элементы списка, чтобы остался только пустой тег ul.

HTML

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

                      <ul id="myList">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>

<ul id="myList">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>

JavaScript

document.input__1('myList').innerHTML = input__2;

                     document.input__1('myList').innerHTML = input__2;

Свойство `innerHTML` также подходит для очистки списков. Присвойте ему пустую строку.

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

Результат

Лог

Выполнить

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

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

Очистка поля ввода

Имеется поле ввода (input type="text") с некоторым текстом. Очистите значение этого поля ввода.

HTML

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

                      <input type="text" id="myInput" value="Текст в поле">

<input type="text" id="myInput" value="Текст в поле">

JavaScript

document.getElementById(input__1).value = input__2;

                     document.getElementById(input__1).value = input__2;

Используйте свойство `value` элемента input, чтобы установить его значение в пустую строку.

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

Результат

Лог

Выполнить

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

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

Очистка содержимого с использованием цикла

Есть контейнер с несколькими однотипными элементами (например, абзацами). Нужно очистить содержимое всех этих элементов, используя цикл.

HTML

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

                      <div id="container">
 <p class="my-paragraph">Текст 1</p>
 <p class="my-paragraph">Текст 2</p>
 <p class="my-paragraph">Текст 3</p>
</div>

<div id="container">
 <p class="my-paragraph">Текст 1</p>
 <p class="my-paragraph">Текст 2</p>
 <p class="my-paragraph">Текст 3</p>
</div>

JavaScript

const paragraphs = document.getElementsByClassName(input__1);
for (let i = 0; i < input__2.length; i++) {
 paragraphs[i].input__3 = "";
}

                     const paragraphs = document.getElementsByClassName(input__1);
for (let i = 0; i < input__2.length; i++) {
 paragraphs[i].input__3 = "";
}

Получите коллекцию элементов с помощью `getElementsByClassName` или `querySelectorAll`, а затем в цикле очистите `textContent` каждого элемента.

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

Результат

Лог

Выполнить

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

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

Очистка содержимого таблицы

Дана таблица с несколькими строками и ячейками. Очистите содержимое всех ячеек таблицы.

HTML

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

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

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

JavaScript

const cells = document.input__1('td');
for (let input__2 = 0; i < cells.length; i++) {
 cells[i].textContent = input__3;
}

                     const cells = document.input__1('td');
for (let input__2 = 0; i < cells.length; i++) {
 cells[i].textContent = input__3;
}

Можно получить все ячейки таблицы с помощью `getElementsByTagName('td')`, а затем в цикле очистить `textContent` каждой ячейки.

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

Результат

Лог

Выполнить

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

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

Удаление всех дочерних узлов

Имеется div с различным содержимым (текст, изображения, другие элементы). Удалите все дочерние узлы этого div, используя метод `removeChild`. Сам элемент div должен остаться.

HTML

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

                      <div id="myDiv">
  Текст
  <img src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png" alt="Картинка">
  <p>Абзац</p>
</div>

<div id="myDiv">
  Текст
  <img src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png" alt="Картинка">
  <p>Абзац</p>
</div>

JavaScript

const div = document.getElementById("myDiv");
while (input__1) {
 div.removeChild(input__2);
}

                     const div = document.getElementById("myDiv");
while (input__1) {
 div.removeChild(input__2);
}

Используйте цикл `while` и свойство `firstChild` элемента. В цикле удаляйте первый дочерний элемент, пока они есть.

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

Результат

Лог

Выполнить

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

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

Очистка содержимого, кроме первого элемента

Дан список. Нужно очистить содержимое всех элементов списка, кроме первого.

HTML

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

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

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

JavaScript

const listItems = document.getElementById("myList").children;
for (let i = input__1; i < listItems.length; i++) {
  listItems[i].input__2 = "";
}

                     const listItems = document.getElementById("myList").children;
for (let i = input__1; i < listItems.length; i++) {
  listItems[i].input__2 = "";
}

Получите все элементы списка. Затем в цикле, начиная со второго элемента (индекс 1), очистите их содержимое.

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

Результат

Лог

Выполнить

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

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

Очистка содержимого по условию

Есть несколько абзацев. Нужно очистить содержимое только тех абзацев, которые содержат определенное слово (например, "секрет").

HTML

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

                      <div id="container">
 <p>Это обычный абзац.</p>
 <p>Этот абзац содержит секрет.</p>
 <p>Еще один обычный абзац.</p>
</div>

<div id="container">
 <p>Это обычный абзац.</p>
 <p>Этот абзац содержит секрет.</p>
 <p>Еще один обычный абзац.</p>
</div>

JavaScript

const paragraphs = document.querySelectorAll("#container p");
for (let i = 0; i < paragraphs.length; i++) {
 if (paragraphs[i].textContent.input__1("секрет")) {
 paragraphs[i].textContent = input__2;
 }
}

                     const paragraphs = document.querySelectorAll("#container p");
for (let i = 0; i < paragraphs.length; i++) {
 if (paragraphs[i].textContent.input__1("секрет")) {
 paragraphs[i].textContent = input__2;
 }
}

Получите все абзацы. В цикле проверьте `textContent` каждого абзаца на наличие нужного слова с помощью `includes()`. Если слово найдено, очистите содержимое.

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

Результат

Лог

Выполнить

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

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