JavaScript 与 jQuery 正确获取和修改 label 标签内容的方法

核心问题与结论

label 元素是用于显示的文本容器，而非表单数据输入控件（如 input、select）。因此，它没有 HTML 标准定义的 value 属性来存储当前显示内容。试图直接操作变量来改变页面显示也是无效的，因为网页渲染是独立的流程。

准备工作

2. 确保已引入 jQuery 库（若使用 jQuery 方法）。
3. 在 HTML 中拥有目标 label 元素，且具备唯一 ID（如 id="myLabel"）。

第1步：获取 Label 的内容

目的：从 DOM 中提取 label 当前显示的文本或 HTML 结构。

• 原生 JavaScript 做法：使用 innerText 或 textContent。这能获取去除格式化的纯文本。

// 1. 获取 DOM 对象
var label = document.getElementById("id");
// 2. 获取文本内容
var value = label.innerText;

• jQuery 做法：使用 .html() 方法。这允许保留内部的 HTML 标签（如果有）。

// 获取内容
var value = $("#id").html();

第2步：修改 Label 的内容

目的：动态更新页面上 label 的显示文字。切勿使用“先获取再给变量赋值”的方式（如 value = "XXX"），这仅改变了内存中的变量，不会反映到页面上。

• 原生 JavaScript 写法：直接设置 DOM 对象的属性。

// 直接操作 DOM 元素
var label = document.getElementById("id");
label.innerText = "新的文本内容";

• jQuery 写法：作为参数传递给 .html() 方法即可修改。

// 链式调用修改内容
$("#id").html("新的文本内容");

常见错误排查

如果您发现以下代码未能生效，请检查是否混淆了输入框与标签的操作逻辑：

// 错误 1：label 没有 value 属性，读取结果为空
var val = $("#id").val(); 

// 错误 2：修改的是局部变量，非 DOM 节点
var temp = $("#id").html();
temp = "修改后的文本"; // 页面无反应

以上就是 JavaScript 与 jQuery 正确操作 label 标签的详细教程，更多关于前端 DOM 操作的资料请关注本站其它相关文章！