Добавление текста в начало/конец элемента: Тренажер JavaScript: Покоряем HTML DOM

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

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

Список тем

Добавление текста в конец параграфа

Добавьте текст "Это добавленный текст." в конец параграфа с идентификатором "myParagraph".

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` или `innerText` чтобы добавить текст в конец.

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

Результат

Лог

Выполнить

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

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

Добавление текста в начало заголовка

Добавьте текст "Важный заголовок: " в начало заголовка первого уровня (`<h1>`) на странице.

HTML

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

                      <h1>Основной заголовок страницы</h1>

<h1>Основной заголовок страницы</h1>

JavaScript

let heading = document.input__1('h1');
let currentText = heading.input__2;
heading.input__3 = "Важный заголовок: " + input__4;

                     let heading = document.input__1('h1');
let currentText = heading.input__2;
heading.input__3 = "Важный заголовок: " + input__4;

Найдите элемент `<h1>` используя `document.querySelector('h1')`. Чтобы добавить текст в начало, необходимо сначала получить текущий текст заголовка и затем объединить его с новым текстом.

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

Результат

Лог

Выполнить

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

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

Добавление текста в конец элемента div

Добавьте текст "Дополнительная информация." в конец `div` элемента с классом "container".

HTML

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

                      <div class="container">
  <p>Содержимое контейнера.</p>
</div>

<div class="container">
  <p>Содержимое контейнера.</p>
</div>

JavaScript

document.input__1('.container').input__2 += "Дополнительная информация.";

                     document.input__1('.container').input__2 += "Дополнительная информация.";

Используйте `document.querySelector('.container')` для выбора элемента div по классу. Затем, добавьте текст в конец его содержимого.

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

Результат

Лог

Выполнить

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

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

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

Добавьте текст "Первый пункт." в начало неупорядоченного списка (`<ul>`) с идентификатором "myList".

HTML

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

                      <ul id="myList">
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>

<ul id="myList">
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>

JavaScript

let list = document.input__1('myList');
let newTextNode = document.input__2("Первый пункт.");
list.input__3(newTextNode, list.input__4);

                     let list = document.input__1('myList');
let newTextNode = document.input__2("Первый пункт.");
list.input__3(newTextNode, list.input__4);

Сначала получите доступ к списку по id. Чтобы добавить текст в начало списка, можно использовать свойство `prepend` или вручную создать текстовый узел и вставить его в начало.

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

Результат

Лог

Выполнить

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

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

Добавление текста с использованием `innerHTML`

Используйте `innerHTML` чтобы добавить текст "<span style='color: red;'>Важное!</span>" в конец элемента `div` с id "infoBox".

HTML

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

                      <div id="infoBox">
  <p>Информация:</p>
</div>

<div id="infoBox">
  <p>Информация:</p>
</div>

JavaScript

document.input__1('infoBox').input__2 += "<span style='color: red;'>Важное!</span>";

                     document.input__1('infoBox').input__2 += "<span style='color: red;'>Важное!</span>";

Метод `innerHTML` позволяет добавлять HTML-разметку. Используйте его, чтобы вставить текст с тегом `<span>`.

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

Результат

Лог

Выполнить

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

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

Очистка и добавление нового текста

Очистите текущий текст элемента `<p>` с классом "message" и установите новый текст: "Текст был обновлен."

HTML

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

                      <p class="message">Изначальное сообщение.</p>

<p class="message">Изначальное сообщение.</p>

JavaScript

let messageElement = document.input__1('.message');
messageElement.input__2 = input__3;
messageElement.input__4 = "Текст был обновлен.";

                     let messageElement = document.input__1('.message');
messageElement.input__2 = input__3;
messageElement.input__4 = "Текст был обновлен.";

Сначала найдите элемент по классу. Чтобы очистить текст, присвойте свойству `textContent` или `innerText` пустую строку `''`. Затем установите новый текст.

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

Результат

Лог

Выполнить

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

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

Условное добавление текста

Если элемент `<div>` с id "statusBox" имеет класс "active", добавьте в его конец текст " - Активно". В противном случае добавьте текст " - Неактивно".

HTML

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

                      <div id="statusBox" class="active">Статус:</div>

<div id="statusBox" class="active">Статус:</div>

JavaScript

let statusBox = document.input__1('statusBox');
if (statusBox.classList.input__2('active')) {
  statusBox.input__3 += " - Активно";
} else {
  statusBox.input__4 += " - Неактивно";
}

                     let statusBox = document.input__1('statusBox');
if (statusBox.classList.input__2('active')) {
  statusBox.input__3 += " - Активно";
} else {
  statusBox.input__4 += " - Неактивно";
}

Используйте `classList.contains('active')` для проверки наличия класса. Примените условную конструкцию `if...else` для добавления соответствующего текста.

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

Результат

Лог

Выполнить

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

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

Добавление текста к нескольким элементам

Добавьте текст " (важно)" в конец каждого элемента `<li>` внутри списка `<ul>` с классом "important-list".

HTML

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

                      <ul class="important-list">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>

<ul class="important-list">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>

JavaScript

let listItems = document.input__1('.important-list li');
listItems.input__2(function(item) {
  item.input__3 += " (важно)";
});

                     let listItems = document.input__1('.important-list li');
listItems.input__2(function(item) {
  item.input__3 += " (важно)";
});

Используйте `document.querySelectorAll('.important-list li')` для выбора всех элементов `<li>` внутри `<ul>` с классом "important-list". Затем, используйте метод `forEach` для перебора каждого элемента и добавления текста.

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

Результат

Лог

Выполнить

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

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