如何使用JavaScript修改绑定for属性的label标签文本内容？

问题核心原因 #

1. 多数无效操作是选择了id="job_number"的输入框元素，输入框为单标签，不存在textContent、innerHTML这类文本属性，修改这类属性自然不会生效
2. 直接修改父元素job_number_wrapper的textContent会覆盖父节点内所有子元素（包含label和输入框），所以会导致输入框丢失
3. 你写的querySelector选择label的逻辑本身是正确的，未生效大概率是JS执行时DOM还未完成渲染，或是使用jQuery时没有提前引入jQuery库导致代码报错终止

正确实现方案 #

原生JS实现

如果将script标签放在body元素末尾（DOM渲染完成后再执行），直接用以下代码即可：

// 方式1：通过for属性匹配对应label
const targetLabel = document.querySelector('label[for="job_number"]');
targetLabel.textContent = '新的label文本';

// 方式2：通过父元素定位子label
const formItemWrapper = document.getElementById('job_number_wrapper');
formItemWrapper.querySelector('label').textContent = '新的label文本';

如果script标签放在head内，需要加DOM加载完成监听：

document.addEventListener('DOMContentLoaded', function() {
  const targetLabel = document.querySelector('label[for="job_number"]');
  targetLabel.textContent = '新的label文本';
});

jQuery实现

需要先确认页面已经引入jQuery库，再使用以下代码：

// 内置DOM加载完成监听，等页面渲染完成后再执行
$(function() {
  $('label[for="job_number"]').text('新的label文本');
});

避坑提示 #

• 输入框的value属性对应的是输入框内的用户可编辑内容，和label标签无关
• 不要直接覆盖父元素的textContent、innerHTML，会清空父元素内原有所有子节点
• 所有DOM操作要等页面DOM渲染完成后再执行，否则会出现找不到元素的问题

内容的提问来源于stack exchange，提问作者Boi