如何使用JavaScript修改无ID的<li>中的‘Charge Amount’文本？

针对你提供的HTML结构，推荐使用CSS层级选择器结合document.querySelector来精准定位目标元素，这是最简洁高效的方法：

方法一：精准层级选择器定位 #

// 定位到包含"Charge Amount"的<b>元素
const targetElement = document.querySelector('.properties li label b');
// 检查元素是否存在，避免报错
if (targetElement) {
  // 替换为你需要的文本
  targetElement.textContent = '自定义金额名称';
}

原理说明 #

• .properties 定位到拥有该类名的<ul>元素
• 后续的li label b是逐层向下的层级选择，精准锁定到包裹目标文本的<b>标签
• 使用textContent修改文本（相比innerText，textContent性能更好且不会触发不必要的重排）

备选方法：兼容旧浏览器（IE8及以下） #

如果需要兼容老旧浏览器，可以使用原生DOM遍历方法：

const propertiesList = document.getElementsByClassName('properties')[0];
if (propertiesList) {
  const firstLi = propertiesList.getElementsByTagName('li')[0];
  const label = firstLi.getElementsByTagName('label')[0];
  const boldText = label.getElementsByTagName('b')[0];
  if (boldText) {
    boldText.textContent = '自定义金额名称';
  }
}

最优选择 #

优先使用第一种方法，document.querySelector是现代浏览器的标准API，代码简洁、可读性强，且能覆盖绝大多数场景。

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