Изменение содержимого: textContent, innerHTML

1. Свойство textContent: просто текст, без наворотов

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

Примеры из жизни:

• После отправки формы вы хотите показать "Спасибо за заявку!" вместо формы.
• При нажатии на кнопку "Показать пароль" — менять текст с "****" на настоящий пароль.
• В интернет-магазине — обновлять корзину, когда пользователь что-то добавляет.
• На калькуляторе — выводить результат вычислений.

Для этого в JavaScript есть два главных инструмента: textContent и innerHTML. Они похожи, но между ними есть важные отличия.

Что такое textContent?

sometag.textContent — это свойство любого DOM-элемента, которое позволяет получить или изменить только текст внутри этого элемента (без HTML-разметки). Если в элементе были теги, они исчезнут и останется только текст.

Аналогия:
Представьте, что у вас есть коробка с письмом, открыткой и конфеткой. Если вы используете textContent, вы вытряхиваете всё содержимое и оставляете только текст из открытки.

Как это работает?

Чтение текста:

const p = document.querySelector('p');
console.log(p.textContent); // Выведет весь текст внутри <p>

Изменение текста:

const h1 = document.querySelector('h1');
h1.textContent = 'Привет, JavaScript!'; // Теперь в <h1> только этот текст

Что происходит с вложенными тегами?

Если внутри элемента были другие HTML-теги, они исчезнут!
Пример:

<p id="demo">Сегодня <b>солнечно</b> и +20°C</p>

const p = document.getElementById('demo');
p.textContent = 'Погода недоступна :('; 
// Теперь <p> содержит только этот текст, тег <b> исчез!

Пример: обновляем результат калькулятора

Допустим, у вас есть такой HTML:

<div id="result">Результат появится здесь</div>

А в JS:

const resultDiv = document.getElementById('result');
resultDiv.textContent = 'Ответ: 42';

2. Свойство innerHTML: текст и HTML-разметка

Что такое innerHTML?

sometag.innerHTML — это свойство, которое позволяет получить или изменить HTML-код внутри элемента, включая все теги. Это как если бы вы могли не только менять текст, но и подсовывать внутрь новые теги, списки, картинки, таблицы, что угодно!

Аналогия:
Если textContent — это просто текст открытки, то innerHTML — это возможность положить в коробку всё, что угодно: открытки, новые письма, конфеты, даже маленькую ёлочку.

Как это работает?

Чтение HTML:

const list = document.querySelector('ul');
console.log(list.innerHTML); 
// Выведет строку с HTML-кодом всех <li> внутри <ul>

Изменение HTML:

const box = document.getElementById('box');
box.innerHTML = '<strong>Важное сообщение!</strong> <span>Не забудьте проверить почту.</span>';

Теперь в элементе с id="box" появится жирное сообщение и span с текстом.

Пример: генерируем список товаров

<ul id="products"></ul>

const products = ['Яблоко', 'Банан', 'Груша'];
const ul = document.getElementById('products');
ul.innerHTML = `
  <li>${products[0]}</li>
  <li>${products[1]}</li>
  <li>${products[2]}</li>
`;

Можно даже делать это в цикле (чуть позже научимся делать это красиво).

В чём разница между textContent и innerHTML?

textContent — всегда безопасен: никакие теги не обработаются, даже если вы случайно вставите <script>.
innerHTML — мощнее, но требует аккуратности: если вы вставите текст, полученный от пользователя, с тегами <script>, то эти скрипты будут выполнены (это называется XSS-уязвимость).

3. Практика: делаем динамическое приложение

Давайте продолжим развивать наше учебное приложение. Пусть это будет "умный калькулятор", который выводит результат на страницу.

HTML:

<h2>Калькулятор</h2>
<input id="a" type="number" placeholder="Первое число">
<input id="b" type="number" placeholder="Второе число">
<button id="sumBtn">Сложить</button>
<div id="calcResult">Результат появится здесь</div>

JS:

const inputA = document.getElementById('a');
const inputB = document.getElementById('b');
const btn = document.getElementById('sumBtn');
const resultDiv = document.getElementById('calcResult');

btn.addEventListener('click', function() {
  // Получаем значения из полей
  const a = Number(inputA.value); // Преобразуем к числу
  const b = Number(inputB.value);

  // Считаем сумму
  const sum = a + b;

  // Показываем результат
  resultDiv.textContent = `Сумма: ${sum}`;
});

Расширяем функциональность с innerHTML:
Допустим, теперь мы хотим не просто показать сумму, а ещё добавить красивую иконку:

resultDiv.innerHTML = `✔ Сумма: ${sum}`;

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

4. Особенности и нюансы работы

Как ведут себя свойства, если элемент пустой?

• Если элемент пуст, то textContent и innerHTML вернут пустую строку.
• Если вы присвоите пустую строку, содержимое элемента исчезнет.

Можно ли вставлять HTML с textContent?

Нет! Всё, что вы вставите через textContent, будет просто текстом.

element.textContent = "<b>Жирный текст?</b>";
// На странице появится: <b>Жирный текст?</b>
// Но это будет именно текст, а не bold-текст !

А если вставлять текст, похожий на HTML, через innerHTML?

Тогда браузер его обработает как HTML:

element.innerHTML = "<b>Жирный текст!</b>";
// На странице появится жирный(bold) текст, т.е. <b>Жирный текст!</b>

Можно ли читать только текст без тегов, если в элементе есть HTML?

Да, используйте textContent.

<div id="demo">Сегодня <b>солнечно</b> и +20°C</div>

document.getElementById('demo').textContent; // "Сегодня солнечно и +20°C"

Немного про innerText

Встречается ещё одно свойство — innerText. Оно похоже на textContent, но:

• Учитывает CSS-стили (например, скрытые элементы не попадут в innerText)
• Может работать медленнее
• В современных проектах рекомендуется использовать textContent — оно предсказуемее.

5. Пример: динамическое добавление списка

Допустим, после нажатия на кнопку нужно показать список покупок.

HTML:

<button id="showList">Показать покупки</button>
<div id="shoppingList"></div>

JS:

const btn = document.getElementById('showList');
const div = document.getElementById('shoppingList');
btn.addEventListener('click', function() {
  const items = ['Молоко', 'Хлеб', 'Сыр'];
  // Вариант 1: через innerHTML
  div.innerHTML = `
    <ul>
      <li>${items[0]}</li>
      <li>${items[1]}</li>
      <li>${items[2]}</li>
    </ul>
  `;
  // Вариант 2: только текст (не красиво)
  // div.textContent = items.join(', ');
});

6. Типичные ошибки при работе с textContent и innerHTML

Ошибка №1: попытка вставить HTML через textContent.
Если вы пишете element.textContent = "<b>Привет</b>", на странице появится именно строка <b>Привет</b>, а не жирный текст. Чтобы добавить HTML, используйте innerHTML.

Ошибка №2: вставка пользовательских данных через innerHTML без проверки.
Если вы вставляете данные, введённые пользователем, в innerHTML, вы рискуете получить XSS-уязвимость. Например, если пользователь введёт <script>alert(1)</script>, этот скрипт выполнится! Поэтому для пользовательского текста — только textContent.

Ошибка №3: забыли очистить содержимое перед новым выводом.
Если вы не очищаете содержимое элемента перед добавлением нового, старый текст или HTML останется, и может возникнуть каша из данных.

Ошибка №4: неправильный выбор метода.
Используете innerHTML там, где можно обойтись textContent. Это медленнее и менее безопасно. Если не нужен HTML — всегда используйте textContent.

Ошибка №5: обращение к свойству до загрузки DOM.
Если вы пытаетесь изменить содержимое элемента до того, как страница полностью загрузилась, получите ошибку "Cannot read property ... of null". Решение — убедиться, что скрипт подключён после HTML, или использовать обработчик события DOMContentLoaded.