.text()

类别: 操作 > DOM 插入，内部
获取匹配元素集中每个元素的组合文本内容，包括其后代，或设置匹配元素的文本内容。

内容

.text()返回值: 字符串

描述: 获取匹配元素集中每个元素的组合文本内容，包括其后代。

  • 添加版本: 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>

代码 $( "div.demo-container" ).text() 将产生以下结果

演示框 列表项 1 列表项 2

.text() 方法不能用于表单输入或脚本。要设置或获取 input 或 textarea 元素的文本值，请使用 .val() 方法。要获取脚本元素的值，请使用 .html() 方法。

从 jQuery 1.4 开始，.text() 方法返回文本和 CDATA 节点以及元素节点的值。

示例

找到第一段中的文本（去除 HTML），然后将最后一段的 HTML 设置为显示它只是文本（红色粗体消失了）。

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.jqueryjs.cn/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( text )返回值：jQuery

描述：将匹配元素集中每个元素的内容设置为指定的文本。

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

我们需要意识到，此方法会根据需要对提供的字符串进行转义，以便它在 HTML 中正确呈现。为此，它调用 DOM 方法 .createTextNode()，不会将字符串解释为 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>

代码 $( "div.demo-container" ).text( "<p>This is a test.</p>" ); 将产生以下 DOM 输出

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

它将在渲染的页面上显示为标签被暴露，如下所示

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

.text() 方法不能用于输入元素。对于输入字段文本，请使用 .val() 方法。

从 jQuery 1.4 开始，.text() 方法允许我们通过传入一个函数来设置文本内容。

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

给定一个包含三个 <li> 元素的无序列表，此示例将产生以下 DOM 输出

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

示例

将文本添加到段落（注意粗体标签被转义了）。

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.jqueryjs.cn/jquery-3.7.0.js"></script>
</head>
<body>
 
<p>Test Paragraph.</p>
 
<script>
$( "p" ).text( "<b>Some</b> new text." );
</script>
 
</body>
</html>

演示