如何使用Javascript修改Span标签中的文本内容？

代码错误点 #

• getElementsByClassName 方法仅支持传入单个类名作为参数，你传入了多个空格分隔的类名，属于语法错误，无法匹配到目标元素
• 你先将元素的 innerText 取值赋值给变量 elems，后续直接修改 elems 只是修改了字符串变量本身，不会反向修改DOM元素的实际内容
• 目标外层元素自带唯一id is_connected，直接用id选择器定位元素效率更高、准确率更高

正确实现代码 #

原生JavaScript版本

// 直接通过id定位父元素，再选中内部的span标签修改文本
const targetSpan = document.querySelector('#is_connected span');
if (targetSpan) {
  targetSpan.innerText = 'Connected';
  // 若需要同步修改提示颜色可放开下面注释
  // targetSpan.style.color = '#00ff00';
}

jQuery版本（你的项目已引入jQuery可直接用）

$('#is_connected span').text('Connected');
// 若需要同步修改提示颜色可放开下面注释
// $('#is_connected span').css('color', '#00ff00');

注意事项 #

如果你的脚本放在页面<head>标签内，需要将代码包裹在DOM加载完成的回调中，避免元素还未渲染完成就执行代码导致找不到元素：

// 原生版本回调
document.addEventListener('DOMContentLoaded', function() {
  const targetSpan = document.querySelector('#is_connected span');
  if (targetSpan) {
    targetSpan.innerText = 'Connected';
  }
})

// jQuery版本回调
$(function() {
  $('#is_connected span').text('Connected');
})

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