jQuery text()的用法（附带实例）

jQuery 提供了 text() 和 text(val) 两个方法用于对文本内容进行操作，其中 text() 用于获取全部匹配元素的文本内容，text(val) 用于设置全部匹配元素的文本内容。

例如，一个 HTML 页面包括下面 3 行代码：

<div>
  <span id="clock">当前时间：2025-07-07 星期一 13:20:10</span>
</div>

要获取 <div> 元素的文本内容，可以使用下面的代码：

$("div").text();

得到的结果为“当前时间：2025-07-07 星期一 13:20:10”。

使用 text() 方法得到的结果是所有匹配元素包含的文本内容的组合，这个方法也对 XML（Extensible Markup Language，可扩展标记语言）文档有效，可以使用 text() 方法解析 XML 文档中元素的文本内容。

【实例】设置 <div> 元素的文本内容。
1) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中使用下面的语句引入 jQuery 库：

<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>

2) 在页面的 <body> 标记中添加一个 <div> 元素，令它的文本内容为空。代码如下：

<div></div>

3) 在引入 jQuery 库的代码下方编写 jQuery 代码，实现为 <div> 标记设置文本内容。具体代码如下：

<script type="text/javascript">
$(document).ready(function() {
  $("div").text("我是通过text()方法设置的文本内容");
});
</script>

运行本实例，结果如下图所示：

图 1 设置<div>元素的文本内容

注意，使用 text() 方法重新设置 <div> 元素的文本内容后，<div> 元素原来的文本内容将被重新设置的文本内容替换，包括 HTML 内容。例如，对下面的代码：

<div><span id="clock">当前时间：2025-07-07 星期一 13:20:10</span></div>

使用 $("div").text("我是通过text()方法设置的文本内容");重新设置文本内容后，该 <div> 标记的文本内容将被替换为：

<div>我是通过text()方法设置的文本内容</div>

jQuery text()的用法（附带实例）

相关文章