jQuery метод .text()

Определение и применение

jQuery метод .text() задает или возвращает текстовое содержимое выбранных элементов.

При передаче строки "<b>текст</b>" метод показывает её буквально: теги не превращаются в элементы HTML. Вызов .text() без аргументов возвращает объединённое текстовое содержимое выбранных элементов и их потомков. Чтение текста также не создаёт HTML-элементы.

jQuery синтаксис:

Синтаксис 1.0:

JavaScript
$( selector ).text() // метод используется без параметров
$( selector ).text( text )

text - String, (Number и Boolean преобразуются в String)

Синтаксис 1.4:

Код
$( selector ).text()
$( selector ).text( text )
$( selector ).text( function(index, text ))

text - String, (Number и Boolean преобразуются в String)

function - Function // возвращает текстовое содержимое

index - Integer

Добавлен в версии jQuery

1.0 (синтаксис расширен в версиях 1.3 и 1.4)

Значения параметров

Параметр Описание
text Текст, который будет установлен в качестве содержания каждого соответствующего элемента. Число, или логическое значение будет преобразовано в строковое представление.
function Функция, которая возвращает текстовое содержимое, которое будет установлено. В качестве параметров получает индекс элемента и его содержимое.
  • index - возвращает индекс позиции элемента в наборе (среди выбранных элементов).
  • text - возвращает текущее содержимое выбранных элементов.

Пример использования

Пример использования jQuery метода .text()

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html
HTML
<button>Клик</button>
<p>Yes</p>
<p>Yes</p>
<p>Yes</p>
<span></span>
main.js
JavaScript
$(document).ready(function () {
    $('button').click(function () {
        $('p').text('No')
        $('span').append('Элементы имеют следующий текст: ' + $('p').text())
    })
})

В этом примере с использованием jQuery метода .text() мы задаем (изменяем) содержимое для всех элементов <p> и с помощью методов .text(), и .append() выводим содержимое выбранных элементов в элемент <span> (после того как они были изменены).

Рассмотрим пример в котором в качестве параметра метода .text() передадим функцию:

Пример использования jQuery метода .text()

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html
HTML
<button>Клик</button>
<p>Раз</p>
<p>Два</p>
<p>Три</p>
main.js
JavaScript
$(document).ready(function () {
    $('button').click(function () {
        $('p').text(function (index, text) {
            return 'Этот элемент имеет индекс - ' + index + ('. Старое содержимое: ' + text)
        })
    })
})

В этом примере с использованием jQuery метода .text() и функции, переданной в качестве параметра метода, мы при нажатии на кнопку (элемент <button>) заменяем содержимое абзацев. Наша функция возвращает значение индекса элемента и старое содержимое элемента (до изменения).