jQuery: html() и text() — подробный урок

Этот урок посвящен подробному рассмотрению функций html() и text() jQuery.

Расширение примера: добавление блока

Для демонстрации работы функций добавим блок с абзацами:

<div id="myDiv">
  <p>Первый абзац</p>
  <p>Второй абзац</p>
</div>

Функция html()

Функция html() возвращает HTML-содержимое элемента. Найдем содержимое блока с ID myDiv используя alert:

alert($("#myDiv").html());

Результат:

<p>Первый абзац</p>
<p>Второй абзац</p>

Функция html() возвращает содержимое, включая HTML-теги.

Функция text()

Функция text() возвращает только текстовое содержимое элемента, игнорируя HTML-теги.

alert($("#myDiv").text());

Результат:

Первый абзацВторой абзац

HTML-теги отсутствуют. Это основное отличие от html().

Замена содержимого

Функции html() и text() позволяют изменять содержимое элемента. html() позволяет использовать HTML-теги:

$("#myDiv").html("<p>Новый абзац</p>");

text() позволяет добавлять только текст:

$("#myDiv").text("Новый текст абзаца");

Можно добавлять текст к существующему содержимому с помощью конкатенации:

$("#myDiv").text($("#myDiv").text() + " Добавленный текст");

Функции html() и text() позволяют получать и изменять содержимое элементов. html() работает с HTML-тегами, а text() – только с текстом. Понимание их различий важно для эффективной работы с jQuery.

Что будем искать? Например,программа