Для работы с содержимым элементов используются методы .text() и .html(). Различаются они между собой тем, что метод .html() предназначен для считывания и вставки HTML-дескрипторов, тогда как метод  .text() предназначен лишь для считывания и записи текста.

 
При вызове элементом любого из этих методов без аргументов возвращается содержимое этого элемента. При передаче методу значения старое значение затирается и заменяется новым.

Чтобы прочитать текст из абзаца с идентификатором bar, выполните в консоли следующий код:

$("#bar").text();

Этот код выбирает весь текст (включая пробельные символы), но игнорирует дескриптор span. Результирующий консольный вывод будет иметь следующий вид.

_______________________________________________________________
>>> $("#bar").text();
"Абзац с идентификатором. A это контейнер SPAN внутри нeгo. "

_______________________________________________________________

Чтобы прочитать из абзаца все, что находится внутри него, включая и дескриптор span, используйте следующий код:

$("#bar").html();

Результирующий консольный вывод будет выглядеть так.

_______________________________________________________________
>>> $("#bar").text();
"Абзац с идентификатором. <span class="foo">A это контейнер

SPAN внутри нeгo.</span> "

_______________________________________________________________

А теперь изменим текст, передав его новое значение методу .text().

$("#bar").text("Это новый текст");

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

 
Чтобы вставить HTML-разметку в абзац, вновь замените его содержимое с помощью следующего кода:

$("#bar").html("Это некоторый <strong>HTML</strong>текст");

После выполнения этого кода в абзаце отобразится новый текст, в котором слово "HTML" будет выделено полужирным шрифтом (рис. 2.16).

 Рис. 2.16. Вид окна браузера после вставки текста и HTML-дескрипторов