Текст и HTML

Содержимое элемента читают и меняют двумя методами: text() работает с текстом, html() — с разметкой внутри элемента. Один и тот же метод без аргумента читает значение, а с аргументом — записывает.

Чтение и запись текста

<h1>Мои задачи</h1>
<p id="counter">Задач: 0</p>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  console.log($('h1').text()); // Мои задачи
 
  $('#counter').text('Задач: 3');
</script>

Строка в абзаце сменилась на «Задач: 3». Такой приём — один метод для чтения и записи — в jQuery встречается везде: у html(), attr(), css(), val().

Разметка внутри элемента

html() возвращает HTML-код содержимого и принимает строку с тегами:

<p id="status">Ничего не выбрано</p>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#status').html('Выбрано: <strong>Купить хлеб</strong>');
 
  console.log($('#status').html()); // Выбрано: <strong>Купить хлеб</strong>
</script>

Название задачи выводится жирным: браузер разобрал тег strong.

Разница между text() и html()

Метод text() вставляет строку как есть: угловые скобки отображаются на странице, а не превращаются в теги:

<p id="a"></p>
<p id="b"></p>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#a').text('<b>Важно</b>');
  $('#b').html('<b>Важно</b>');
</script>

В первом абзаце видны теги, во втором — жирное слово.

Чтение у нескольких элементов

Когда в наборе несколько элементов, методы ведут себя по-разному:

Новое значение из старого

Вместо строки можно передать функцию. Она получает индекс элемента и текущее значение и возвращает новое:

<ul>
  <li>Купить хлеб</li>
  <li>Позвонить Олегу</li>
</ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('li').text(function (index, oldText) {
    return (index + 1) + '. ' + oldText;
  });
</script>

Пункты получили номера: «1. Купить хлеб», «2. Позвонить Олегу».

То же на обычном JavaScript

text() соответствует свойству textContent, html() — свойству innerHTML.

Частая ошибка

Вставлять через html() то, что ввёл пользователь. Если в названии задачи окажется <img src=x onerror="...">, браузер выполнит этот код — это уязвимость XSS. Текст из полей формы выводите только через text().