.text()

类别：文档处理 > DOM内部插入
取得匹配的元素集合中每个元素的文本内容合并，包括它们的后代元素，或者设置匹配的元素的文本内容。

内容：

.text()返回类型：String

描述：取得匹配的元素集合中每个元素的文本内容合并，包括它们的后代元素。

  • 增补版本：1.0.text()

    • 此方法不接受任何参数。

与.html()方法不同，.text()方法既可用在XML文档中也可以用在HTML文档中。.text()方法的结果是一个字符串，包含了所有匹配元素的组合文本。（由于HTML解析器在不同浏览器中的变体，此返回的文本可能在新行和其它空白上有点多样性）。请考虑下面的HTML：

1
2
3
4
5
6
7
 
<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>

The code $( "div.demo-container" ).text() would produce the following result:

Demonstration Box list item 1 list item 2

The .text() method cannot be used on form inputs or scripts. To set or get the text value of input or textarea elements, use the .val() method. To get the value of a script element, use the .html() method.

As of jQuery 1.4, the .text() method returns the value of text and CDATA nodes as well as element nodes.

示例：

Find the text in the first paragraph (stripping out the html), then set the html of the last paragraph to show it is just text (the red bold is gone).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<!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-1.10.2.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( text )返回类型：jQuery

描述：设置匹配的元素的文本内容。

  • 增补版本：1.0.text( text )

    • text
      类型：String or Number or Boolean
      要设置为匹配的元素的内容的文本。如果提供了数值或布尔值，它会被转换为字符串表达。

  • 增补版本：1.4.text( function )

    • function
      类型：Function( Integer index, String text ) => String
      A function returning the text content to set. Receives the index position of the element in the set and the old text value as arguments.

与.html()方法不同，.text()方法既可用在XML文档中也可以用在HTML文档中。

We need to be aware that this method escapes the string provided as necessary so that it will render correctly in HTML. To do so, it calls the DOM method .createTextNode(), does not interpret the string as HTML. 请考虑下面的HTML：

1
2
3
4
5
6
7
 
<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>

The code $( "div.demo-container" ).text( "<p>This is a test.</p>" ); will produce the following DOM output:

1
2
3
 
<div class="demo-container">
  &lt;p&gt;This is a test.&lt;/p&gt;
</div>

It will appear on a rendered page as though the tags were exposed, like this:

1
 
<p>This is a test</p>

The .text() method cannot be used on input elements. For input field text, use the .val() method.

As of jQuery 1.4, the .text() method allows us to set the text content by passing in a function.

1
2
3
 
$( "ul li" ).text(function( index ) {
  return "item number " + ( index + 1 );
});

Given an unordered list with three <li> elements, this example will produce the following DOM output:

1
2
3
4
5
 
<ul>
  <li>item number 1</li>
  <li>item number 2</li>
  <li>item number 3</li>
</ul>

示例：

Add text to the paragraph (notice the bold tag is escaped).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<!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-1.10.2.js"></script>
</head>
<body>
 
<p>Test Paragraph.</p>
 
<script>
$( "p" ).text( "<b>Some</b> new text." );
</script>
 
</body>
</html>

演示：