Этот урок посвящен подробному рассмотрению функций 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.