Содержание:
.text()Возвращает: Строка
Описание: Получение объединённого текстового содержимого каждого элемента в наборе сопоставленных элементов, включая их потомков.
В отличие от .html() метода, .text() можно использовать как в XML, так и в HTML документах. Результатом .text() метода является строка, содержащая объединённый текст всех сопоставленных элементов. (Из-за различий в HTML-парсерах разных браузеров возвращаемый текст может отличаться по переносам строк и другим пробелам.) Рассмотрим следующий HTML:
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
<ul>
<li>list item 1</li>
<li>list <strong>item</strong> 2</li>
</ul>
</div> Код $( "div.demo-container" ).text() произведёт следующий результат:
Demonstration Box list item 1 list item 2
.text() метод нельзя использовать для элементов формы или скриптов. Для установки или получения текстового значения input или textarea элементов используйте метод .val(). Для получения значения элемента скрипта используйте метод .html().
Начиная с jQuery 1.4, .text() метод возвращает значения текстовых и CDATA узлов, а также узлов элементов.
Пример:
Найти текст в первом абзаце (убрав html), затем установить html последнего абзаца, чтобы показать, что это только текст (красная жирная надпись исчезла).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>text demo</title>
<style>
p {
color: blue;
margin: 8px;
}
b {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<p><b>Test</b> Paragraph.</p>
<p></p>
<script>
var str = $( "p" ).first().text();
$( "p" ).last().html( str );
</script>
</body>
</html> Демо:
.text( текст )Возвращает: jQuery
Описание: Установить содержимое каждого элемента в наборе сопоставленных элементов на указанный текст.
-
версия добавлена: 1.0.text( текст )
- текстТекст, который нужно установить как содержимое каждого сопоставленного элемента. При вводе числа или булева значения, оно будет преобразовано в строковое представление.
-
-
версия добавлена: 1.4.text( функция )
- функцияФункция, возвращающая текстовое содержимое для установки. Принимает индекс положения элемента в наборе и старое значение текста в качестве аргументов.
-
В отличие от .html() метода, .text() можно использовать как в XML, так и в HTML документах.
Следует учитывать, что этот метод экранирует предоставленную строку по мере необходимости, чтобы она правильно отображалась в HTML. Для этого он вызывает метод DOM .createTextNode(), не интерпретируя строку как HTML. Рассмотрим следующий HTML:
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
<ul>
<li>list item 1</li>
<li>list <strong>item</strong> 2</li>
</ul>
</div> Код $( "div.demo-container" ).text( "<p>This is a test.</p>" ); произведёт следующий DOM вывод:
<div class="demo-container"> <p>This is a test.</p> </div>
На отображаемой странице это будет выглядеть так, как будто теги видны, например так:
<p>This is a test</p>
.text() метод нельзя использовать для элементов ввода. Для текстовых полей ввода используйте метод .val().
Начиная с jQuery 1.4, .text() метод позволяет установить текстовое содержимое, передав функцию.
$( "ul li" ).text(function( index ) {
return "item number " + ( index + 1 );
}); Если у нас есть неупорядоченный список с тремя <li> элементами, этот пример произведёт следующий DOM вывод:
<ul> <li>item number 1</li> <li>item number 2</li> <li>item number 3</li> </ul>
Пример:
Добавить текст в абзац (обратите внимание, что тег bold экранируется).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>text demo</title>
<style>
p {
color: blue;
margin: 8px;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<p>Test Paragraph.</p>
<script>
$( "p" ).text( "<b>Some</b> new text." );
</script>
</body>
</html> 
