在
jQuery 中操作 `<
span>` 元素的
内容非常简单。我们可以通过 `.text()` 或者 `.html()` 方法来
获取或修改 `<
span>` 的
内容。
### 主要方法：
1. **`.text()`**：用于
获取或设置指定元素的纯文本
内容，不会处理 HTML 标签。
2. **`.html()`**：用于
获取或设置指定元素的所有
内容（包括 HTML 标记）。
下面详细介绍如何使用这两种方法对 `<
span>` 内部
内容进行读取和修改。
---
####
获取 `<
span>`
内容
假设页面中有如下结构：
```html
<
span id="my
Span">初始
内容</
span>
```
如果想取得该 `<
span>` 的文本
内容，可以这样做：
```
javascript
var content = $("#my
Span").text(); // 返回 "初始
内容"
console.log(content);
```
如果是包含 HTML 片段的情况，则需要用 `.html()` 来提取完整信息：
```html
<
span id="another
Span"><strong>加粗文字</strong></
span>
```
对应的
JavaScript 代码为：
```
javascript
var htmlContent = $("#another
Span").html();
// 输出 "<strong>加粗文字</strong>"
console.log(htmlContent);
var textContent = $("#another
Span").text();
// 只返回 “加粗文字”
console.log(textContent);
```
---
#### 修改 `<
span>`
内容
同样地，我们可以利用上述两个函数给特定 `<
span>` 赋予新
值。
##### 替换为普通字符串
```
javascript
$("#my
Span").text("新的文本");
// 现在 <
span> 显示的是“新的文本”而不是之前的"初始
内容"
```
##### 插入含标签的复杂片段
如果你希望插入一段带标记的语言，则应该选择 `.html()`.
例如将上面的例子改为：
```
javascript
$("#another
Span").html("
斜体字替换原有强调部分");
// 此时 another
Span 包裹着的新HTML会显示成 斜体
```
注意这里传进去的是完整的 HTML 字符串形式而非 DOM 对象！
---
#### 综合案例 - 动态更新计数器
设想场景下我们需要实时改变某个
Span 段落里的数字统计结果，比如点击一次增加一的数量:
```html
<p><
span id="counter">0</
span>次点击。</p>
<script src="https://code.
jquery.com/
jquery-3.6.0.min.js"></script>
<script type="text/
javascript">
$(document).ready(function(){
let count = parseInt($("#counter").text(), 10);
$("button").click(function () {
++count;
$('#counter').text(count.toString());
});
});
</script>
<button>点我增数</button>
```
在此脚本里每次按压按钮都会把当前计数
值从原来的
Span 提取出、递增再放回去展现给用户看到最新的状态。
---
本文介绍了一种使用jQuery来获取HTML中span元素内容的方法。通过简单的代码示例，展示了如何利用jQuery的选择器和.text()方法来读取指定span元素的文本内容。
扫一扫
3056
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
